Bundle-Analyse und Strategie zur Codeaufteilung

Warum die Bundle-Größe wichtig ist

Analyse mit rollup-plugin-visualizer

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({ open: true, gzipSize: true, brotliSize: true })
  ],
});

// After build, open the generated HTML file to explore the treemap

Next.js Bundle Analyzer

npm install @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({});

// Run:
// ANALYZE=true npm run build

Routenbasiertes Code-Splitting

// React Router v6 with lazy loading
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

<Routes>
  <Route path="/dashboard" element={<Suspense fallback={<Loading />}><Dashboard /></Suspense>} />
  <Route path="/settings" element={<Suspense fallback={<Loading />}><Settings /></Suspense>} />
</Routes>

Komponentenbasiertes Code-Splitting

const MonacoEditor = lazy(() => import('@monaco-editor/react'));
const MapView = lazy(() => import('./MapView'));

function ProductEditor({ showMap }) {
  return (
    <>
      <Suspense fallback={<EditorSkeleton />}><MonacoEditor /></Suspense>
      {showMap && <Suspense fallback={<MapSkeleton />}><MapView /></Suspense>}
    </>
  );
}

Dynamischer Import für bedingte Funktionen

async function exportToPDF() {
  const { default: jsPDF } = await import('jspdf'); // ~300KB — loaded on demand
  const doc = new jsPDF();
  doc.text('Hello', 10, 10);
  doc.save('export.pdf');
}

Tree Shaking

// Bad — imports entire lodash (~70KB):
import _ from 'lodash';
const result = _.debounce(fn, 300);

// Good — imports only debounce (<2KB):
import debounce from 'lodash/debounce';
// or with tree-shaking-friendly lodash-es:
import { debounce } from 'lodash-es';

Kritische Chunks vorladen

// Webpack magic comment — preload on hover:
const Dashboard = lazy(() => import(/* webpackPrefetch: true */ './Dashboard'));
// or preload (higher priority):
const Dashboard = lazy(() => import(/* webpackPreload: true */ './Dashboard'));

Auswirkungen von Drittanbieter-Code analysieren

Ein Bundle-Budget festlegen

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vendor-react': ['react', 'react-dom'],
        'vendor-router': ['react-router-dom'],
      },
    },
  },
  chunkSizeWarningLimit: 200, // warn at 200KB
},

Kurztest

Zusammenfassung