perf(ui): Split large JavaScript bundle (780 kB) #305

New issue

Closed

opened 2026-01-25 18:31:33 +00:00 by jack · 0 comments

jack commented

2026-01-25 18:31:33 +00:00

Owner

Problem

Beim UI-Build erscheint eine Warnung:

dist/assets/index-BAT81Ukg.js   780.87 kB │ gzip: 226.64 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

Aktuelle Bundle-Größen

Datei	Größe	Gzip
index.html	0.43 kB	0.29 kB
index.css	204.72 kB	40.82 kB
index.js	780.87 kB	226.64 kB

Auswirkung

Längere initiale Ladezeit
Mehr Bandbreite für Mobile-User
Schlechtere Lighthouse-Scores

Lösungsansätze

1. Code-Splitting mit Dynamic Imports

Views lazy laden:

// Statt:
import { SettingsView } from './views/Settings';

// Besser:
const SettingsView = lazy(() => import('./views/Settings'));

2. Manual Chunks in vite.config.ts

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vendor-react': ['react', 'react-dom', 'react-router-dom'],
        'vendor-ui': ['@radix-ui/react-*', 'lucide-react'],
        'vendor-charts': ['recharts'],
      }
    }
  }
}

3. Analyse mit rollup-plugin-visualizer

pnpm add -D rollup-plugin-visualizer

Priorität

Niedrig - funktioniert, ist aber nicht optimal für Performance.

## Problem Beim UI-Build erscheint eine Warnung: ``` dist/assets/index-BAT81Ukg.js 780.87 kB │ gzip: 226.64 kB (!) Some chunks are larger than 500 kB after minification. Consider: - Using dynamic import() to code-split the application - Use build.rollupOptions.output.manualChunks to improve chunking - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit. ``` ## Aktuelle Bundle-Größen | Datei | Größe | Gzip | |-------|-------|------| | index.html | 0.43 kB | 0.29 kB | | index.css | 204.72 kB | 40.82 kB | | **index.js** | **780.87 kB** | **226.64 kB** | ## Auswirkung - Längere initiale Ladezeit - Mehr Bandbreite für Mobile-User - Schlechtere Lighthouse-Scores ## Lösungsansätze ### 1. Code-Splitting mit Dynamic Imports Views lazy laden: ```typescript // Statt: import { SettingsView } from './views/Settings'; // Besser: const SettingsView = lazy(() => import('./views/Settings')); ``` ### 2. Manual Chunks in vite.config.ts ```typescript build: { rollupOptions: { output: { manualChunks: { 'vendor-react': ['react', 'react-dom', 'react-router-dom'], 'vendor-ui': ['@radix-ui/react-*', 'lucide-react'], 'vendor-charts': ['recharts'], } } } } ``` ### 3. Analyse mit rollup-plugin-visualizer ```bash pnpm add -D rollup-plugin-visualizer ``` ## Priorität Niedrig - funktioniert, ist aber nicht optimal für Performance.