Minifikáció — mi ez, a minifikáció alapelvei és kód eszközök

Mi az a minifikáció?

Minifikáció — a forráskód automatikus átalakítása, amely során a program végrehajtását nem befolyásoló összes karakter eltávolításra kerül. A szóközök, tabulátorok, újsor karakterek, megjegyzések és felesleges zárójelek eltávolításra vagy lerövidítésre kerülnek. A minifikációt JavaScript, CSS, HTML és ritkábban JSON konfigurációkra alkalmazzák az éles üzembe helyezés előtt.

A minifikáció fő célja a hálózaton keresztül továbbított fájlok méretének csökkentése. Egy 300 KB méretű JavaScript fájl a minifikáció után 120–150 KB lehet, ami lassú 3G kapcsolaton 200–400 ms-mal csökkenti a betöltési időt. A Google PageSpeed Insights és a Lighthouse közvetlenül ajánlja a kód minifikálását: ez a teljesítmény és a Core Web Vitals értékelésének egyik kritériuma.

A minifikáció a build pipeline elengedhetetlen része. A TypeScript vagy Babel transzpiláció után a kód áthalad a Tree Shaking-en (nem használt függvények eltávolítása), majd a minifikátoron, és csak ezután kerül összeállításra a végleges bundle-ba. A modern bundlerekben (Webpack, Rollup, esbuild) a minifikációt pluginek végzik a build utolsó szakaszában.

Mit távolít el a minifikáció

Hogyan működik a minifikáció: fő technikák

Szóközök és sortörések eltávolítása — a legegyszerűbb és legkézenfekvőbb technika. A minifikátor elemzője áthalad az AST-n (Abstract Syntax Tree) és eltávolítja az összes olyan szóköz karaktert, amely nem része string literáloknak. A legtöbb minifikátor emellett egyetlen sorba egyesíti az operátorokat, ami további megtakarítást jelent GZip vagy Brotli tömörítés esetén.

Változónevek rövidítése (mangling) — agresszívebb technika. A lokális változók és függvényparaméterek egybetűs azonosítókra lesznek átnevezve: a, b, c. Ez további 15–30%-kal csökkenti a méretet. A Terser és az esbuild támogatja a mangling-ot bizonyos nevek megőrzésének opciójával (például nyilvános API a mangle.props.reserved segítségével).

Nem használt kód eltávolítása

Dead code elimination (DCE) — a soha végre nem hajtott kódágak eltávolítása. A minifikátor elemzi a mindig hamis feltételeket (if (false)) és eltávolítja a megfelelő blokkokat. A fejlettebb elemzés a Tree Shaking fázisban történik a minifikáció előtt, de a DCE a minifikátor szintjén elkapja a modul szintjén nem észlelt lokális holtkód eseteket.

Változónevek lerövidítése (Mangling)

Mangling — a lokális változók és függvényparaméterek rövid azonosítókra (egy-két betű) történő átnevezése. A Terser a mangling-ot scope alapján végzi: egy függvényen belüli változók egyedi rövid neveket kapnak, amelyek nem ütköznek a külső scope-okkal. A mangle.reserved opció lehetővé teszi bizonyos nevek megőrzését — például könyvtárak nyilvános API-ját.

A mangling nem érinti a globális változókat, objektum tulajdonságokat (ha a mangle.props nincs engedélyezve) és a new-vel használt osztályneveket. A könyvtárak nyilvános API-jának mangling elleni védelméhez használja a mangle.props.reserved-t reguláris kifejezésekkel: reserved: ["_prop", /^private_/]. E beállítás nélkül a mangling tönkreteheti a könyvtárat, ha a külső kód név alapján fér hozzá az objektum tulajdonságaihoz.

Példa: minifikáció előtt és után

// Forráskód
function calculateTotal(price, tax) {
    var result = price + (price * tax);
    // Visszaadjuk a végső összeget
    return result;
}

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

// Terser minifikáció után
function calculateTotal(a, b){return a + a * b}
var c = calculateTotal(100, .2);
console.log(c);

A második példában a Terser eltávolította a megjegyzéseket, szóközöket és sortöréseket, átnevezte a price-t a-ra, a tax-ot b-re, a result-ot c-re. A méret 197 karakterről 79-re csökkent — 60%-os megtakarítás. Mindeközben a kód funkcionalitása teljesen megmaradt: a calculateTotal(100, 0.2) 120-at ad vissza.

Minifikációs eszközök: Terser, esbuild, UglifyJS

Terser — a JavaScript szabványos minifikátora a Webpack ökoszisztémában és a legtöbb modern bundlerben. A Terser támogatja az ES6+ szintaxist (nyíl függvények, async/await, spread), a nyilvános API védelmével ellátott mangling-ot, a source maps-eket és a CPU szám szerinti párhuzamos futtatást. Az 5.16-os verziótól kezdve a Terser tartalmaz TypeScript optimalizálásokat — type-only importok és interfészek eltávolítását.

esbuild — Go nyelven írt minifikátor, amely a névadó bundlerbe van beágyazva. Az esbuild natív kódjának és párhuzamos feldolgozásának köszönhetően 10–100-szor gyorsabban végzi a minifikációt, mint a Terser. Az esbuild azonban kevesebb optimalizálást támogat: nem végez mangling-ot tulajdonságok megőrzésével, nem távolítja el a type-only importokat és kevésbé agresszívan optimalizálja a kifejezéseket.

Terser konfiguráció Webpack-ban

// webpack.config.js — TerserPlugin konfiguráció
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,
      }),
    ],
  },
};

A TerserPlugin konfigurációja három kulcsfontosságú blokkot tartalmaz. A compress a kifejezések optimalizálásáért felel: a drop_console eltávolítja a console.log-ot, a drop_debugger eltávolítja a debugger-t, a dead_code eltávolítja az elérhetetlen ágakat. A mangle a változók átnevezését kezeli a reserved segítségével a nyilvános nevek védelmére. A parallel bekapcsolja a többszálúságot a CPU-k számának megfelelően.

CSS minifikáció esbuild segítségével

// esbuild: CLI parancs JS és CSS minifikációhoz
// 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 egy soros konfigurációt fogad el. A minify: true bekapcsolja a minifikációt mind JS, mind CSS esetében. A sourcemap: true kód térképeket generál a hibakereséshez. A target meghatározza a minimális ES szintet — az esbuild automatikusan transzpilálja a modern kódot a kiválasztott verzióra. Az esbuild különösen hatékony olyan projektekben, ahol a build idő kritikus: CI/CD pipeline-ok, Hot Module Replacement és gyors prototípus készítés.

Minifikáció React Native-ban és WebView-ban

React Native a Metro Bundler-t használja — saját bundlerét, amely Terser-alapú minifikációt tartalmaz. Éles módban a Metro automatikusan alkalmazza a minifikációt az alkalmazás JavaScript bundle-jára. A minifikáció konfigurálása a Metro-ban a metro.config.js fájlban a transformer.minifierConfig szekcióban történik. Ezenkívül az inline-require kikapcsolható a bundle méretének csökkentése érdekében iOS-en.

A mobilalkalmazásokban lévő WebView is profitál a minifikációból. A WebView-ban betöltött HTML, CSS és JS fájloknak minifikáción kell átesniük, mielőtt beágyaznák őket az alkalmazásba vagy betöltenék a szerverről. A helyi erőforrások (Assets) esetében a minifikáció különösen fontos — az APK/IPA mérete közvetlenül befolyásolja a telepítések konverzióját az alkalmazásboltokban.

Hermes és minifikáció

Hermes — JavaScript motor React Native-hoz, amelyet a Facebook fejlesztett ki. A Hermes Ahead-of-Time (AOT) bájtkód fordítását végzi, ami 30–50%-kal csökkenti az alkalmazás indítási idejét. A Hermes esetében a JavaScript bundle minifikációja a bájtkódba fordítás előtt történik a Terser segítségével. A Hermes támogatja saját HBC (Hermes Bytecode) formátumát, de a JS minifikációs szakasz továbbra is szükséges.

Metro konfiguráció React Native-hoz

// metro.config.js — minifikáció konfiguráció
const defaultConfig = require("metro-config/src/defaults");

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

Metro a minifierConfig.drop_console segítségével eltávolítja az összes console.log-ot a React Native éles bundle-jából. A mangle.safari10 paraméter megakadályozza azon azonosítók átnevezését, amelyek tönkreteszik a Safari 10-et (iOS 10). Ez különösen fontos az iOS 10/11-et futtató régi iPad és iPhone 5s eszközöket támogató alkalmazásoknál.

Miben különbözik a minifikáció a tömörítéstől

Minifikáció és tömörítés (gzip, brotli) az optimalizálás különböző szakaszai. A minifikáció a forráskód szintjén működik, és csökkenti a karakterek számát a szerverre küldés előtt. A tömörítés a szállítási protokoll szintjén működik, és a szerver (nginx, Apache, CDN) alkalmazza a fájl kliensnek történő továbbításakor. A minifikáció a tömörítés előtt csökkenti a méretet, ami kettős hatást eredményez: a gzip a már lerövidített adatokat tömöríti.

Egy 300 KB-os JavaScript fájl minifikáció után — 120 KB, gzip után — 35–40 KB. Ha csak gzip-t alkalmazunk egy nem minifikált fájlra, a méret 55–70 KB lesz. A Minifikáció + gzip 30–40%-kal jobb eredményt ad, mint a gzip önmagában. A Brotli (6. szint) a minifikáció után 15–20%-kal hatékonyabban tömörít, mint a gzip.