JavaScript bundle-optimering — Code splitting, tree shaking og analyse

JavaScript er den dyreste ressource per byte på nettet: det skal downloades, dekomprimeres, parses, kompileres og eksekveres — alt på main thread. Et 500 KB JavaScript-bundle kan blokere interaktivitet i 2-5 sekunder på en middel Android-telefon. Bundle-optimering handler om at sende så lidt JavaScript som muligt, og kun det der er nødvendigt.

Tree shaking

Tree shaking er bundlerens evne til at fjerne ubrugt kode (dead code elimination). Det kræver ESM-imports (ikke CommonJS require):

// ✅ Tree shakeable — kun `formatDate` inkluderes i bundle
import { formatDate } from './utils';

// ❌ Ikke tree shakeable — hele utils-modulet inkluderes
const utils = require('./utils');

Mange npm-pakker eksponerer ikke tree-shakeable ESM. lodash er et klassisk eksempel — import _ from 'lodash' inkluderer hele biblioteket (70+ KB). Alternativet: import debounce from 'lodash/debounce' eller lodash-es.

Sidecar bundles: Vite og Rollup er fremragende til tree shaking af ESM. Webpack kræver mode: 'production' og sideEffects: false i package.json for optimal tree shaking.

Code splitting

Code splitting opdeler ét monolitisk bundle i chunks der loades on-demand:

Route-baseret splitting (React, Next.js):

// React.lazy — chunk loades kun når komponenten renderes
const CheckoutPage = React.lazy(() => import('./CheckoutPage'));
const BlogPost = React.lazy(() => import('./BlogPost'));

Dynamiske imports (alle bundlers):

// Kode loades kun ved klik
button.addEventListener('click', async () => {
  const { initChart } = await import('./chart-library');
  initChart(data);
});

Vendor splitting — adskil tredjeparts-biblioteker fra applikationskode. Biblioteker ændres sjældnere og caches længere:

// vite.config.js
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'],
        charts: ['chart.js'],
      }
    }
  }
}

Bundle-analyse

Webpack Bundle Analyzer visualiserer hvad der fylder:

npm install --save-dev webpack-bundle-analyzer
# Kør med npx webpack-bundle-analyzer stats.json

Vite bundle visualizer:

npx vite-bundle-visualizer

source-map-explorer analyserer en compiled bundle via source maps:

npx source-map-explorer dist/main.js

Kig efter: duplikeret kode, unødvendigt store biblioteker, og kode der burde lazy-loades.

Komprimering

Alle moderne servere og CDN’er understøtter komprimering. Gzip reducerer typisk JavaScript med 60-70%. Brotli reducerer 15-25% mere end Gzip for tekstfiler:

# Nginx — aktiver Brotli og Gzip
brotli on;
brotli_comp_level 6;
gzip on;
gzip_types text/javascript application/javascript;

Vite og Webpack genererer .gz og .br filer ved build — serveren sender den komprimerede version automatisk.

Moderne JavaScript med browsermål

Bundling til ES2015 (default for mange tools) inkluderer polyfills der er unødvendige for moderne browsere. Specificér et moderne browsermål for at eliminere unødvendige polyfills:

// vite.config.js
build: {
  target: 'es2020'
}

// .browserslistrc — moderne browsere only
last 2 Chrome versions
last 2 Firefox versions
last 2 Safari versions

En moderne target reducerer typisk bundle-størrelse med 10-20% ved at eliminere transpilerings-overhead.

Import cost og editor-integration

VS Code extension Import Cost viser størrelsen af hvert import direkte i editoren — tidlig feedback inden bundling. Det er det nemmeste tool til at fange dyre biblioteker før de når produktion. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.