Minifiering — vad det är, principer för minifiering och verktyg för kod

Vad är minifiering?

Minifiering — automatisk transformation av källkod där alla tecken som inte påverkar programmets exekvering tas bort. Mellanslag, tabbar, nyradstecken, kommentarer och överflödiga parenteser tas bort eller förkortas. Minifiering tillämpas på JavaScript, CSS, HTML och mer sällan JSON-konfigurationer före driftsättning i produktion.

Huvudmålet med minifiering är att minska storleken på filer som skickas över nätverket. En JavaScript-fil på 300 KB kan efter minifiering vara 120–150 KB, vilket minskar laddningstiden med 200–400 ms vid långsam 3G-anslutning. Google PageSpeed Insights och Lighthouse rekommenderar direkt minifiering av kod: detta är ett av kriterierna för prestandautvärdering och Core Web Vitals.

Minifiering är en integrerad del av byggpipelinen (build pipeline). Efter transpilering av TypeScript eller Babel passerar koden genom Tree Shaking (borttagning av oanvända funktioner), sedan genom minifieraren och först därefter sammanställs den i den slutliga bundlen. I moderna bundlers (Webpack, Rollup, esbuild) utförs minifiering av plugins i det sista byggskedet.

Vad minifiering tar bort

Hur fungerar minifiering: huvudsakliga tekniker

Borttagning av mellanslag och radbrytningar — den enklaste och mest uppenbara tekniken. Minifierarens parser går igenom AST (Abstract Syntax Tree) och tar bort alla blanktecken som inte är en del av strängliteral. De flesta minifierare kombinerar dessutom operatorer på en rad, vilket ger ytterligare besparing vid komprimering via GZip eller Brotli.

Ersättning av variabelnamn med korta namn (mangling) — en mer aggressiv teknik. Lokala variabler och funktionsparametrar döps om till enbokstavsidentifierare: a, b, c. Detta minskar storleken med ytterligare 15–30%. Terser och esbuild stöder mangling med alternativet att behålla vissa namn (till exempel offentligt API via mangle.props.reserved).

Borttagning av oanvänd kod

Dead code elimination (DCE) — borttagning av kodgrenar som aldrig exekveras. Minifieraren analyserar villkor som alltid är falska (if (false)) och tar bort motsvarande block. Mer avancerad analys utförs i Tree Shaking-fasen före minifiering, men DCE på minifierarnivå fångar lokala fall av död kod som inte upptäckts på modulnivå.

Förkortning av variabelnamn (Mangling)

Mangling — omdöpning av lokala variabler och funktionsparametrar till korta identifierare (en-två bokstäver). Terser utför mangling baserat på omfång: variabler inom en funktion får unika korta namn som inte kolliderar med externa omfång. Alternativet mangle.reserved gör det möjligt att behålla vissa namn — till exempel offentligt API för bibliotek.

Mangling påverkar inte globala variabler, objektegenskaper (om inte mangle.props är aktiverat) och klassnamn som används med new. För att skydda offentligt API för bibliotek från mangling, använd mangle.props.reserved med reguljära uttryck: reserved: ["_prop", /^private_/]. Utan denna inställning kan mangling förstöra biblioteket om extern kod kommer åt objektegenskaper efter namn.

Exempel: före och efter minifiering

// Källkod
function calculateTotal(price, tax) {
    var result = price + (price * tax);
    // Returnerar det slutliga beloppet
    return result;
}

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

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

I det andra exemplet tog Terser bort kommentarer, mellanslag och radbrytningar, döpte om price till a, tax till b, result till c. Storleken minskade från 197 tecken till 79 — en besparing på 60%. Samtidigt är kodens funktionalitet fullt bevarad: calculateTotal(100, 0.2) returnerar 120.

Minifieringsverktyg: Terser, esbuild, UglifyJS

Terser — standard JavaScript-minifieraren inom Webpacks ekosystem och de flesta moderna bundlers. Terser stöder ES6+-syntax (pilfunktioner, async/await, spread), mangling med skydd av offentligt API, source maps och parallell körning på antal CPU:er. Från och med version 5.16 innehåller Terser optimeringar för TypeScript — borttagning av type-only-import och gränssnitt.

esbuild — minifierare i Go, inbyggd i bundlern med samma namn. esbuild utför minifiering 10–100 gånger snabbare än Terser tack vare inbyggd kod och parallell bearbetning. esbuild stöder dock färre optimeringar: det utför inte mangling med bevarande av egenskaper, tar inte bort type-only-import och optimerar uttryck mindre aggressivt.

Konfiguration av Terser i Webpack

// webpack.config.js — konfiguration av TerserPlugin
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,
      }),
    ],
  },
};

Konfigurationen av TerserPlugin innehåller tre viktiga block. compress ansvarar för uttrycksoptimering: drop_console tar bort console.log, drop_debugger tar bort debugger, dead_code tar bort oåtkomliga grenar. mangle hanterar omdöpning av variabler med reserved för skydd av offentliga namn. parallel aktiverar flertrådning på antal CPU:er.

CSS-minifiering via esbuild

// esbuild: CLI-kommando för minifiering av JS och CSS
// 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 accepterar en rads konfiguration. minify: true aktiverar minifiering för både JS och CSS. sourcemap: true genererar kodkartor för felsökning. target bestämmer lägsta ES-nivå — esbuild transpilerar automatiskt modern kod till den valda versionen. esbuild är särskilt effektivt i projekt där byggtid är kritisk: CI/CD-pipelines, Hot Module Replacement och snabb prototypframställning.

Minifiering i React Native och WebView

React Native använder Metro Bundler — sin egen bundler som inkluderar minifiering baserad på Terser. I produktionsläge tillämpar Metro automatiskt minifiering på applikationens JavaScript-bundle. Konfiguration av minifiering i Metro ställs in via metro.config.js i avsnittet transformer.minifierConfig. Dessutom kan inline-require inaktiveras för att minska bundle-storleken på iOS.

WebView i mobila applikationer drar också nytta av minifiering. HTML, CSS och JS som laddas i WebView måste genomgå minifiering före inbäddning i applikationen eller laddning från servern. För lokala resurser (Assets) är minifiering särskilt viktig — APK/IPA-storleken påverkar direkt installationskonverteringen i appbutiker.

Hermes och minifiering

Hermes — JavaScript-motor för React Native, utvecklad av Facebook. Hermes utför Ahead-of-Time (AOT)-kompilering av bytekod, vilket minskar applikationens starttid med 30–50%. För Hermes utförs minifiering av JavaScript-bundle före kompilering till bytekod via Terser. Hermes stöder sitt eget HBC-format (Hermes Bytecode), men JS-minifieringsfasen förblir nödvändig.

Konfiguration av Metro för React Native

// metro.config.js — konfiguration av minifiering
const defaultConfig = require("metro-config/src/defaults");

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

Metro med minifierConfig.drop_console tar bort alla console.log från React Native-produktionsbundlen. Parametern mangle.safari10 förhindrar omdöpning av identifierare som förstör Safari 10 (iOS 10). Detta är särskilt viktigt för applikationer som stöder gamla iPad- och iPhone 5s-enheter med iOS 10/11.

Skillnad mellan minifiering och komprimering

Minifiering och komprimering (gzip, brotli) är olika optimeringsfaser. Minifiering arbetar på källkodsnivå och minskar antalet tecken före sändning till servern. Komprimering arbetar på transportprotokollnivå och tillämpas av servern (nginx, Apache, CDN) vid överföring av filen till klienten. Minifiering minskar storleken före komprimering, vilket ger en dubbel effekt: gzip komprimerar redan förkortad data.

En JavaScript-fil på 300 KB efter minifiering — 120 KB, efter gzip — 35–40 KB. Om endast gzip tillämpas på en icke-minifierad fil blir storleken 55–70 KB. Minifiering + gzip ger 30–40% bättre resultat än enbart gzip. Brotli (nivå 6) komprimerar efter minifiering 15–20% effektivare än gzip.