Code-Splitting-Strategien für schnellere Webanwendungen

// ❌ Importing everything upfront — one massive bundle
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';
import Analytics from './pages/Analytics';
import AdminPanel from './pages/AdminPanel';
 
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/settings" element={<Settings />} />
      <Route path="/analytics" element={<Analytics />} />
      <Route path="/admin" element={<AdminPanel />} />
    </Routes>
  );
}

// ✅ Lazy-loaded routes — each page in its own chunk
import { lazy, Suspense } from 'react';
 
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const Analytics = lazy(() => import('./pages/Analytics'));
const AdminPanel = lazy(() => import('./pages/AdminPanel'));
 
function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/analytics" element={<Analytics />} />
        <Route path="/admin" element={<AdminPanel />} />
      </Routes>
    </Suspense>
  );
}

// ❌ Chart library loaded for every user, even those who never view charts
import { Chart } from 'chart.js';
import { marked } from 'marked';
import hljs from 'highlight.js';
 
export function renderAnalytics(data: AnalyticsData) {
  const chart = new Chart(canvas, { type: 'line', data });
  return chart;
}

// ✅ Heavy libraries loaded only when the feature is used
export async function renderAnalytics(data: AnalyticsData) {
  const { Chart } = await import('chart.js');
  const chart = new Chart(canvas, { type: 'line', data });
  return chart;
}
 
export async function renderMarkdown(content: string) {
  const [{ marked }, hljs] = await Promise.all([
    import('marked'),
    import('highlight.js'),
  ]);
 
  marked.setOptions({
    highlight: (code, lang) => hljs.highlight(code, { language: lang }).value,
  });
 
  return marked(content);
}

// Named chunks — easier debugging and cache management
const Editor = lazy(() =>
  import(/* webpackChunkName: "editor" */ './components/Editor')
);
 
// Prefetch — load in background after main resources finish
const AdminPanel = lazy(() =>
  import(
    /* webpackChunkName: "admin" */
    /* webpackPrefetch: true */
    './pages/AdminPanel'
  )
);
 
// Preload — load in parallel with the current navigation
const CriticalWidget = lazy(() =>
  import(
    /* webpackChunkName: "critical-widget" */
    /* webpackPreload: true */
    './components/CriticalWidget'
  )
);

<!-- Prefetch: downloaded during idle time, low priority -->
<!-- Browser fetches this AFTER the current page finishes loading -->
<link rel="prefetch" href="/static/js/admin.chunk.js" />
 
<!-- Preload: downloaded immediately, high priority -->
<!-- Browser fetches this IN PARALLEL with the current page -->
<link rel="preload" href="/static/js/critical-widget.chunk.js" as="script" />

// webpack.config.js — vendor splitting configuration
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // Core framework — changes very rarely
        framework: {
          test: /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/,
          name: 'framework',
          priority: 40,
          enforce: true,
        },
        // Large libraries — split individually for granular caching
        chartjs: {
          test: /[\\/]node_modules[\\/]chart\.js[\\/]/,
          name: 'chartjs',
          priority: 30,
        },
        // Remaining vendor code
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 20,
          minSize: 30000,
        },
        // Shared application code used by 2+ chunks
        commons: {
          minChunks: 2,
          name: 'commons',
          priority: 10,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

import { lazy, Suspense, useState } from 'react';
 
// Heavy modal with rich text editor, only loaded when opened
const RichTextModal = lazy(() =>
  import(
    /* webpackChunkName: "rich-text-modal" */
    /* webpackPrefetch: true */
    './components/RichTextModal'
  )
);
 
function DocumentPage() {
  const [showEditor, setShowEditor] = useState(false);
 
  return (
    <div>
      <h2>Document Viewer</h2>
      <DocumentContent />
 
      <button onClick={() => setShowEditor(true)}>
        Edit Document
      </button>
 
      {showEditor && (
        <Suspense fallback={<ModalSkeleton />}>
          <RichTextModal onClose={() => setShowEditor(false)} />
        </Suspense>
      )}
    </div>
  );
}

# Install the analyzer
npm install --save-dev webpack-bundle-analyzer
 
# Generate stats and visualize
npx webpack --profile --json > stats.json
npx webpack-bundle-analyzer stats.json
 
# Or add to webpack config for automatic analysis
# const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
# plugins: [new BundleAnalyzerPlugin()]

// Runtime check: log chunk loading for debugging
if (process.env.NODE_ENV === 'development') {
  const originalFetch = window.fetch;
  window.fetch = function (...args) {
    const url = typeof args[0] === 'string' ? args[0] : args[0]?.url;
    if (url?.includes('.chunk.js')) {
      console.log(`[Chunk loaded] ${url}`);
    }
    return originalFetch.apply(this, args);
  };
}