Till Tomczak
7a99af7ace
This commit introduces a suite of tools for analyzing and optimizing imports and functions within the backend codebase. The following files have been updated: - backend/FRONTEND_ASSETS_ANALYSE.md - backend/REDUNDANZ_ANALYSE_FINAL.md - backend/SOFORT_L\303\226SCHBARE_FUN
276 lines
7.8 KiB
Markdown
276 lines
7.8 KiB
Markdown
# Frontend Assets Analyse - MYP Backend
|
|
|
|
## Zusammenfassung der Analyse
|
|
|
|
Diese umfassende Analyse identifiziert ungenutzte Templates, redundante Assets und Optimierungsmöglichkeiten im MYP-Backend.
|
|
|
|
## 1. Template-Verwendung Analyse
|
|
|
|
### ✅ Aktiv verwendete Templates
|
|
|
|
**Haupttemplates:**
|
|
- `base.html` - Basis-Layout (⭐ Kritisch)
|
|
- `admin.html` - Unified Admin Panel
|
|
- `dashboard.html` - Haupt-Dashboard
|
|
- `login.html` - Login-Seite
|
|
- `printers.html` - Drucker-Übersicht
|
|
- `jobs.html` - Aufträge-Verwaltung
|
|
- `stats.html` - Statistiken
|
|
- `calendar.html` - Kalender-Ansicht
|
|
|
|
**Error-Templates:**
|
|
- `errors/400.html`, `errors/403.html`, `errors/404.html`, `errors/405.html`
|
|
- `errors/413.html`, `errors/429.html`, `errors/500.html`, `errors/502.html`
|
|
- `errors/503.html`, `errors/505.html`
|
|
|
|
**Admin-Templates:**
|
|
- `admin_add_user.html`, `admin_add_printer.html`
|
|
- `admin_edit_user.html`, `admin_edit_printer.html`
|
|
- `admin_guest_requests.html`, `admin_guest_otps.html`
|
|
- `admin_tapo_monitoring.html`, `admin_plug_schedules.html`
|
|
- `admin_advanced_settings.html`
|
|
|
|
**Guest-Templates:**
|
|
- `guest_request.html`, `guest_start_job.html`, `guest_job_status.html`
|
|
- `guest_status.html`, `guest_status_check.html`
|
|
- `guest_requests_overview.html`, `guest_requests_by_email.html`
|
|
|
|
**User-Templates:**
|
|
- `profile.html`, `settings.html`
|
|
|
|
**Legal-Templates:**
|
|
- `imprint.html`, `privacy.html`, `terms.html`, `legal.html`
|
|
- `system_info.html`
|
|
|
|
**Tapo-Templates:**
|
|
- `tapo_control.html`, `tapo_manual_control.html`
|
|
|
|
### ❌ Ungenutzte Templates (Zum Löschen geeignet)
|
|
|
|
**Root-Level (nicht referenziert):**
|
|
- `404.html` ❌ (dupliziert durch `errors/404.html`)
|
|
- `500.html` ❌ (dupliziert durch `errors/500.html`)
|
|
- `admin_modern.html` ❌ (nicht mehr verwendet)
|
|
- `admin_manage_printer.html` ❌ (Redundant)
|
|
- `admin_printer_settings.html` ❌ (Legacy)
|
|
- `admin_settings.html` ❌ (durch unified admin ersetzt)
|
|
- `analytics.html` ❌ (nicht implementiert)
|
|
- `csrf_test.html` ❌ (nur Debug-Tool)
|
|
- `energy_dashboard.html` ❌ (nicht aktiv verwendet)
|
|
- `index.html` ❌ (nicht geroutet)
|
|
- `new_job.html` ❌ (durch jobs.html ersetzt)
|
|
- `socket_test.html` ❌ (nur für Tests)
|
|
|
|
**Admin-Templates (Legacy/Redundant):**
|
|
- `admin_guest_requests_overview.html` ❌ (redundant)
|
|
|
|
**Ungenutzte Verzeichnisse:**
|
|
- `jobs/new.html` ❌ (nicht referenziert)
|
|
- `macros/ui_components.html` ❌ (nicht verwendet)
|
|
|
|
## 2. CSS-Asset Analyse
|
|
|
|
### 💾 Größte CSS-Dateien (Optimierungsbedarf)
|
|
|
|
**TailwindCSS:**
|
|
- `tailwind.min.css` - 212KB ⚠️
|
|
- `tailwind.min.css.gz` - 360KB ⚠️ (Größer als Original!)
|
|
- `output.css` - 244KB ⚠️
|
|
- `output.min.css` - 208KB
|
|
|
|
**Input-CSS (Redundant):**
|
|
- `input.css` - 100KB ❌
|
|
- `input.min.css` - 80KB ❌
|
|
- `input-original-backup.css` - 100KB ❌
|
|
- `input-raspberry-optimized.css` - 20KB ❌
|
|
- `input-raspberry-balanced.css` - 16KB ❌
|
|
|
|
**Redundante CSS-Dateien:**
|
|
- `dist/` Verzeichnis - 484KB ❌ (Build-Artefakte)
|
|
- `build/` Verzeichnis - 108KB ❌ (Build-Artefakte)
|
|
- Alle `.css.gz` Dateien die größer sind als Original ❌
|
|
|
|
### ✅ Wichtige CSS-Dateien (Behalten)
|
|
|
|
- `dark-light-unified.css` - 20KB ✅
|
|
- `components.css` - 20KB ✅
|
|
- `glassmorphism.css` - 8KB ✅
|
|
- `professional-theme.css` - 24KB ✅
|
|
|
|
### 🗑️ CSS-Dateien zum Löschen
|
|
|
|
```bash
|
|
# Redundante Input-Dateien
|
|
input.css (100KB)
|
|
input.min.css (80KB)
|
|
input-original-backup.css (100KB)
|
|
input-original-backup.min.css (76KB)
|
|
input-raspberry-optimized.css (20KB)
|
|
input-raspberry-balanced.css (16KB)
|
|
|
|
# Build-Verzeichnisse
|
|
dist/ (484KB)
|
|
build/ (108KB)
|
|
|
|
# Defekte Gzip-Dateien (größer als Original)
|
|
tailwind.min.css.gz (360KB vs 212KB Original)
|
|
```
|
|
|
|
## 3. JavaScript-Asset Analyse
|
|
|
|
### 💾 Größte JS-Dateien
|
|
|
|
**Chart Libraries:**
|
|
- `charts/` - 936KB ⚠️ (ApexCharts - möglicherweise unused)
|
|
- `fullcalendar/` - 392KB ✅ (aktiv verwendet)
|
|
|
|
**Große JS-Dateien:**
|
|
- `glassmorphism-notifications.js` - 64KB ⚠️
|
|
- `admin-unified.js` - 64KB ✅
|
|
- `admin-panel.js` - 44KB ❌ (redundant durch unified)
|
|
- `admin-guest-requests.js` - 44KB ❌ (redundant)
|
|
- `job-manager.js` - 36KB ✅
|
|
- `conflict-manager.js` - 32KB ✅
|
|
|
|
### 🗑️ JavaScript-Dateien zum Löschen
|
|
|
|
```bash
|
|
# Redundante Admin-Dateien
|
|
admin-panel.js (44KB)
|
|
admin-guest-requests.js (44KB)
|
|
|
|
# Überdimensionierte Notification-Datei
|
|
glassmorphism-notifications.js (64KB)
|
|
|
|
# Möglicherweise ungenutzte Features
|
|
charts/ (936KB) - Prüfung erforderlich
|
|
optimization-features.js (32KB)
|
|
```
|
|
|
|
## 4. Redundante Template-Bereiche
|
|
|
|
### Admin-Panel Consolidierung
|
|
|
|
Das System verwendet sowohl:
|
|
- `admin.html` (Unified) ✅
|
|
- `admin_modern.html` ❌ (Legacy)
|
|
- Verschiedene einzelne Admin-Templates ⚠️
|
|
|
|
**Empfehlung:** Alle Admin-Funktionen in `admin.html` konsolidieren.
|
|
|
|
### Error-Page Duplikate
|
|
|
|
- Root-Level: `404.html`, `500.html` ❌
|
|
- Errors-Verzeichnis: `errors/404.html`, `errors/500.html` ✅
|
|
|
|
**Empfehlung:** Root-Level Error-Pages löschen.
|
|
|
|
## 5. Broken Links Analyse
|
|
|
|
### Template-Referenzen
|
|
|
|
**✅ Korrekte Referenzen (base.html):**
|
|
```html
|
|
<link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='fontawesome/css/all.min.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='css/dark-light-unified.css') }}" rel="stylesheet">
|
|
<script src="{{ url_for('static', filename='js/csrf-fix.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/jobs-safety-fix.js') }}"></script>
|
|
```
|
|
|
|
**⚠️ Potenziell problematische Referenzen:**
|
|
- HTMX-Integration lädt nur bei Bedarf ✅
|
|
- Chart-Libraries möglicherweise nicht überall genutzt ⚠️
|
|
|
|
## 6. Asset-Optimierungsempfehlungen
|
|
|
|
### Sofortige Maßnahmen (Platz sparen)
|
|
|
|
**1. Template-Cleanup (ca. 50KB gespart):**
|
|
```bash
|
|
rm templates/404.html templates/500.html
|
|
rm templates/admin_modern.html
|
|
rm templates/admin_manage_printer.html
|
|
rm templates/admin_settings.html
|
|
rm templates/analytics.html
|
|
rm templates/energy_dashboard.html
|
|
rm templates/index.html
|
|
rm templates/new_job.html
|
|
rm templates/socket_test.html
|
|
rm -rf templates/jobs/
|
|
rm -rf templates/macros/
|
|
```
|
|
|
|
**2. CSS-Cleanup (ca. 800KB gespart):**
|
|
```bash
|
|
rm static/css/input*.css
|
|
rm static/css/input*.min.css
|
|
rm -rf static/css/dist/
|
|
rm -rf static/css/build/
|
|
rm static/css/*.css.gz # Defekte Gzip-Dateien
|
|
```
|
|
|
|
**3. JavaScript-Cleanup (ca. 200KB gespart):**
|
|
```bash
|
|
rm static/js/admin-panel.js
|
|
rm static/js/admin-guest-requests.js
|
|
rm static/js/glassmorphism-notifications.js
|
|
```
|
|
|
|
### Mittelfristige Optimierungen
|
|
|
|
**1. CSS-Optimierung:**
|
|
- TailwindCSS purging aktivieren (von 212KB auf ~50KB)
|
|
- Nur benötigte FontAwesome-Icons bundeln
|
|
- CSS-Splitting nach Seitenbereichen
|
|
|
|
**2. JavaScript-Optimierung:**
|
|
- Chart-Library Lazy Loading
|
|
- JavaScript-Bundling optimieren
|
|
- Tree-shaking für ungenutzte Funktionen
|
|
|
|
**3. Asset-Komprimierung:**
|
|
- Korrekte Gzip-Komprimierung (aktuell defekt)
|
|
- Brotli-Komprimierung hinzufügen
|
|
- Cache-Strategien optimieren
|
|
|
|
### Langfristige Empfehlungen
|
|
|
|
**1. Template-Architektur:**
|
|
- Unified Admin-Template weiter ausbauen
|
|
- Komponenten-basierte Template-Struktur
|
|
- Template-Inheritance optimieren
|
|
|
|
**2. Asset-Pipeline:**
|
|
- Webpack/Vite für Asset-Bundling
|
|
- Automatisches Dead-Code-Removal
|
|
- Performance-Monitoring
|
|
|
|
**3. Loading-Strategien:**
|
|
- Critical CSS inline
|
|
- Non-critical CSS deferred
|
|
- JavaScript-Module lazy loading
|
|
|
|
## 7. Zusammenfassung der Einsparungen
|
|
|
|
**Sofortige Einsparungen:**
|
|
- Templates: ~50KB
|
|
- CSS: ~800KB
|
|
- JavaScript: ~200KB
|
|
- **Gesamt: ~1MB** (ca. 20% Reduktion)
|
|
|
|
**Potenzielle weitere Einsparungen:**
|
|
- TailwindCSS Purging: ~150KB
|
|
- Chart-Library Optimization: ~500KB
|
|
- **Zusätzlich: ~650KB**
|
|
|
|
**Gesamtpotenzial: ~1.65MB Reduktion (ca. 35% kleiner)**
|
|
|
|
## 8. Nächste Schritte
|
|
|
|
1. **Sofort:** Ungenutzte Templates und CSS löschen
|
|
2. **Diese Woche:** JavaScript-Cleanup durchführen
|
|
3. **Nächste Woche:** TailwindCSS Purging aktivieren
|
|
4. **Nächster Monat:** Asset-Pipeline überarbeiten
|
|
|
|
Diese Optimierungen verbessern besonders die Performance auf Raspberry Pi-Systemen und reduzieren Ladezeiten erheblich. |