Minificatie — wat is het, principes van minificatie en tools voor code

Wat is minificatie?

Minificatie — automatische transformatie van broncode waarbij alle tekens die de uitvoering van het programma niet beïnvloeden, worden verwijderd. Spaties, tabs, nieuwe-regeltekens, commentaren en overbodige haakjes worden verwijderd of verkort. Minificatie wordt toegepast op JavaScript, CSS, HTML en, minder vaak, JSON-configuraties vóór implementatie in productie.

Het hoofddoel van minificatie is het verkleinen van de grootte van bestanden die via het netwerk worden verzonden. Een JavaScript-bestand van 300 KB kan na minificatie 120–150 KB groot zijn, wat de laadtijd met 200–400 ms verkort bij een trage 3G-verbinding. Google PageSpeed Insights en Lighthouse raden direct aan om code te minificeren: dit is een van de criteria voor prestatie-evaluatie en Core Web Vitals.

Minificatie is een integraal onderdeel van de build-pipeline. Na transpilatie van TypeScript of Babel doorloopt code Tree Shaking (verwijderen van ongebruikte functies), vervolgens de minificator en pas daarna wordt het samengevoegd in de uiteindelijke bundle. In moderne bundlers (Webpack, Rollup, esbuild) wordt minificatie uitgevoerd door plugins in de laatste bouwfase.

Wat verwijdert minificatie

Hoe werkt minificatie: belangrijkste technieken

Verwijderen van spaties en regeleinden — de eenvoudigste en meest voor de hand liggende techniek. De parser van de minificator doorloopt de AST (Abstract Syntax Tree) en verwijdert alle spatietekens die geen deel uitmaken van stringliterals. De meeste minificators combineren operatoren bovendien op één regel, wat extra besparing oplevert bij compressie via GZip of Brotli.

Vervangen van variabelenamen door korte namen (mangling) — een agressievere techniek. Lokale variabelen en functieparameters worden hernoemd naar identificatoren van één letter: a, b, c. Dit vermindert de grootte met nog eens 15–30%. Terser en esbuild ondersteunen mangling met een optie om bepaalde namen te behouden (bijvoorbeeld de publieke API via mangle.props.reserved).

Verwijderen van ongebruikte code

Dead code elimination (DCE) — verwijderen van codetakken die nooit worden uitgevoerd. De minificator analyseert condities die altijd false zijn (if (false)) en verwijdert de bijbehorende blokken. Meer geavanceerde analyse wordt uitgevoerd in de Tree Shaking-fase vóór minificatie, maar DCE op het niveau van de minificator vangt lokale gevallen van dode code op die niet op moduleniveau zijn gedetecteerd.

Verkorten van variabelenamen (Mangling)

Mangling — hernoemen van lokale variabelen en functieparameters naar korte identificatoren (één-twee letters). Terser voert mangling uit op basis van scope: variabelen binnen één functie krijgen unieke korte namen die niet conflicteren met externe scopes. De optie mangle.reserved maakt het mogelijk bepaalde namen te behouden — bijvoorbeeld de publieke API van bibliotheken.

Mangling heeft geen invloed op globale variabelen, objecteigenschappen (tenzij mangle.props is ingeschakeld) en klassennamen die met new worden gebruikt. Om de publieke API van bibliotheken te beschermen tegen mangling, moet mangle.props.reserved worden gebruikt met reguliere expressies: reserved: ["_prop", /^private_/]. Zonder deze instelling kan mangling de bibliotheek beschadigen als externe code objecteigenschappen op naam benadert.

Voorbeeld: voor en na minificatie

// Broncode
function calculateTotal(price, tax) {
    var result = price + (price * tax);
    // Retourneren we het eindbedrag
    return result;
}

var total = calculateTotal(100, 0.2);
console.log(total);

// Na Terser-minificatie
function calculateTotal(a, b){return a + a * b}
var c = calculateTotal(100, .2);
console.log(c);

In het tweede voorbeeld heeft Terser commentaren, spaties en regeleinden verwijderd, price hernoemd naar a, tax naar b, result naar c. De grootte is gedaald van 197 tekens naar 79 — een besparing van 60%. Tegelijkertijd blijft de functionaliteit van de code volledig behouden: calculateTotal(100, 0.2) retourneert 120.

Minificatie-tools: Terser, esbuild, UglifyJS

Terser — de standaard JavaScript-minificator in het Webpack-ecosysteem en de meeste moderne bundlers. Terser ondersteunt ES6+-syntax (pijlfuncties, async/await, spread), mangling met bescherming van de publieke API, source maps en parallelle uitvoering op het aantal CPU's. Sinds versie 5.16 bevat Terser optimalisaties voor TypeScript — verwijderen van type-only imports en interfaces.

esbuild — minificator in Go, ingebouwd in de gelijknamige bundler. esbuild voert minificatie 10–100 keer sneller uit dan Terser dankzij native code en parallelle verwerking. esbuild ondersteunt echter minder optimalisaties: het voert geen mangling met behoud van eigenschappen uit, verwijdert geen type-only imports en optimaliseert expressies minder agressief.

Terser configureren in Webpack

// webpack.config.js — TerserPlugin configuratie
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
            dead_code: true,
          },
          mangle: {
            reserved: ["React", "Component"],
          },
          output: {
            comments: false,
          },
        },
        parallel: true,
      }),
    ],
  },
};

De configuratie van TerserPlugin bevat drie belangrijke blokken. compress is verantwoordelijk voor expressie-optimalisatie: drop_console verwijdert console.log, drop_debugger verwijdert debugger, dead_code verwijdert onbereikbare takken. mangle beheert het hernoemen van variabelen met reserved voor bescherming van publieke namen. parallel schakelt multi-threading in op het aantal CPU's.

CSS-minificatie via esbuild

// esbuild: CLI-opdracht voor JS en CSS minificatie
// esbuild app.js --bundle --minify --outfile=dist/app.min.js
// esbuild app.css --bundle --minify --outfile=dist/app.min.css

const esbuild = require("esbuild");

esbuild.build({
  entryPoints: ["src/app.js", "src/styles.css"],
  bundle: true,
  minify: true,
  sourcemap: true,
  target: ["es2015"],
  outdir: "dist",
}).catch(() => process.exit(1));

esbuild API accepteert een one-liner configuratie. minify: true schakelt minificatie in voor zowel JS als CSS. sourcemap: true genereert codekaarten voor debugging. target bepaalt het minimale ES-niveau — esbuild transpileert moderne code automatisch naar de geselecteerde versie. esbuild is bijzonder effectief in projecten waar bouwtijd kritisch is: CI/CD-pipelines, Hot Module Replacement en snelle prototypes.

Minificatie in React Native en WebView

React Native gebruikt Metro Bundler — zijn eigen bundler die minificatie op basis van Terser bevat. In productiemodus past Metro automatisch minificatie toe op de JavaScript-bundle van de applicatie. Configuratie van minificatie in Metro wordt ingesteld via metro.config.js in de sectie transformer.minifierConfig. Daarnaast kan inline-require worden uitgeschakeld om de bundelgrootte op iOS te verkleinen.

WebView in mobiele applicaties profiteert ook van minificatie. HTML, CSS en JS die in WebView worden geladen, moeten vóór inbedding in de applicatie of laden vanaf de server door minificatie gaan. Voor lokale bronnen (Assets) is minificatie bijzonder belangrijk — de APK/IPA-grootte heeft direct invloed op de conversie van installaties in app-winkels.

Hermes en minificatie

Hermes — JavaScript-engine voor React Native, ontwikkeld door Facebook. Hermes voert Ahead-of-Time (AOT) compilatie van bytecode uit, wat de opstarttijd van de applicatie met 30–50% vermindert. Voor Hermes wordt minificatie van de JavaScript-bundle vóór compilatie naar bytecode uitgevoerd via Terser. Hermes ondersteunt zijn eigen HBC-formaat (Hermes Bytecode), maar de JS-minificatiefase blijft noodzakelijk.

Metro configureren voor React Native

// metro.config.js — minificatie configuratie
const defaultConfig = require("metro-config/src/defaults");

module.exports = require("metro-config").mergeConfig(
  defaultConfig,
  {
    transformer: {
      minifierConfig: {
        compress: {
          drop_console: true,
        },
        mangle: {
          safari10: true,
        },
      },
    },
  }
);

Metro met minifierConfig.drop_console verwijdert alle console.log uit de productie-bundle van React Native. De parameter mangle.safari10 voorkomt hernoemen van identificatoren die Safari 10 (iOS 10) beschadigen. Dit is vooral belangrijk voor applicaties die oude iPad- en iPhone 5s-apparaten met iOS 10/11 ondersteunen.

Verschil tussen minificatie en compressie

Minificatie en compressie (gzip, brotli) zijn verschillende optimalisatiefasen. Minificatie werkt op het niveau van broncode en vermindert het aantal tekens vóór verzending naar de server. Compressie werkt op het niveau van het transportprotocol en wordt toegepast door de server (nginx, Apache, CDN) bij het verzenden van het bestand naar de client. Minificatie vermindert de grootte vóór compressie, wat een dubbel effect geeft: gzip comprimeert al verkorte gegevens.

Een JavaScript-bestand van 300 KB na minificatie — 120 KB, na gzip — 35–40 KB. Als alleen gzip wordt toegepast op een niet-geminificeerd bestand, is de grootte 55–70 KB. Minificatie + gzip geeft een 30–40% beter resultaat dan gzip alleen. Brotli (niveau 6) comprimeert na minificatie 15–20% efficiënter dan gzip.