Minifikace — co to je, principy minifikace a nástroje pro kód

Co je minifikace?

Minifikace — automatická transformace zdrojového kódu, při které jsou odstraněny všechny znaky, které neovlivňují provádění programu. Mezery, tabulátory, znaky nového řádku, komentáře a nadbytečné závorky jsou odstraněny nebo zkráceny. Minifikace se aplikuje na JavaScript, CSS, HTML a méně často na JSON konfigurace před nasazením do produkce.

Hlavním cílem minifikace je zmenšení velikosti souborů přenášených přes síť. JavaScriptový soubor o velikosti 300 KB může po minifikaci zabírat 120–150 KB, což zkracuje dobu načítání o 200–400 ms při pomalém 3G připojení. Google PageSpeed Insights a Lighthouse přímo doporučují minifikaci kódu: je to jedno z kritérií hodnocení výkonu a Core Web Vitals.

Minifikace je nedílnou součástí build pipeline. Po transpilaci TypeScriptu nebo Babelu kód prochází Tree Shakingem (odstranění nepoužívaných funkcí), poté minifikátorem a teprve poté je sestaven do konečného bundle. V moderních bundlerech (Webpack, Rollup, esbuild) se minifikace provádí pomocí pluginů v závěrečné fázi sestavení.

Co minifikace odstraňuje

Jak funguje minifikace: hlavní techniky

Odstraňování mezer a zalomení řádků — nejjednodušší a nejzřejmější technika. Analyzátor minifikátoru prochází AST (Abstract Syntax Tree) a odstraňuje všechny bílé znaky, které nejsou součástí řetězcových literálů. Většina minifikátorů navíc spojuje operátory na jeden řádek, což poskytuje další úsporu při kompresi pomocí GZip nebo Brotli.

Nahrazování názvů proměnných krátkými názvy (mangling) — agresivnější technika. Lokální proměnné a parametry funkcí jsou přejmenovány na jednopísmenné identifikátory: a, b, c. To snižuje velikost o dalších 15–30%. Terser a esbuild podporují mangling s možností zachování určitých názvů (například veřejného API pomocí mangle.props.reserved).

Odstraňování nepoužívaného kódu

Dead code elimination (DCE) — odstraňování větví kódu, které se nikdy neprovedou. Minifikátor analyzuje podmínky, které jsou vždy false (if (false)), a odstraňuje odpovídající bloky. Pokročilejší analýza se provádí ve fázi Tree Shaking před minifikací, ale DCE na úrovni minifikátoru zachycuje lokální případy mrtvého kódu nezjištěné na úrovni modulů.

Zkracování názvů proměnných (Mangling)

Mangling — přejmenovávání lokálních proměnných a parametrů funkcí na krátké identifikátory (jedno-dvě písmena). Terser provádí mangling na základě rozsahu: proměnné uvnitř jedné funkce získávají jedinečná krátká jména, která nekolidují s vnějšími rozsahy. Volba mangle.reserved umožňuje zachovat určité názvy — například veřejné API knihoven.

Mangling neovlivňuje globální proměnné, vlastnosti objektů (pokud není zapnut mangle.props) a názvy tříd používané s new. Pro ochranu veřejného API knihoven před manglingem použijte mangle.props.reserved s regulárními výrazy: reserved: ["_prop", /^private_/]. Bez tohoto nastavení může mangling knihovnu poškodit, pokud externí kód přistupuje k vlastnostem objektu podle názvu.

Příklad: před a po minifikaci

// Zdrojový kód
function calculateTotal(price, tax) {
    var result = price + (price * tax);
    // Vracíme konečný součet
    return result;
}

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

// Po minifikaci Terserem
function calculateTotal(a, b){return a + a * b}
var c = calculateTotal(100, .2);
console.log(c);

Ve druhém příkladu Terser odstranil komentáře, mezery a zalomení řádků, přejmenoval price na a, tax na b, result na c. Velikost se zmenšila ze 197 znaků na 79 — úspora 60%. Funkčnost kódu je přitom plně zachována: calculateTotal(100, 0.2) vrací 120.

Nástroje pro minifikaci: Terser, esbuild, UglifyJS

Terser — standardní JavaScript minifikátor v ekosystému Webpacku a většiny moderních bundlerů. Terser podporuje syntaxi ES6+ (šipkové funkce, async/await, spread), mangling s ochranou veřejného API, source maps a paralelní spouštění podle počtu CPU. Od verze 5.16 obsahuje Terser optimalizace pro TypeScript — odstraňování type-only importů a rozhraní.

esbuild — minifikátor v Go, integrovaný do stejnojmenného bundleru. esbuild provádí minifikaci 10–100krát rychleji než Terser díky nativnímu kódu a paralelnímu zpracování. esbuild však podporuje méně optimalizací: neprovádí mangling se zachováním vlastností, neodstraňuje type-only importy a optimalizuje výrazy méně agresivně.

Konfigurace Terseru ve Webpacku

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

Konfigurace TerserPlugin zahrnuje tři klíčové bloky. compress je odpovědný za optimalizaci výrazů: drop_console odstraňuje console.log, drop_debugger odstraňuje debugger, dead_code odstraňuje nedosažitelné větve. mangle řídí přejmenovávání proměnných s reserved pro ochranu veřejných názvů. parallel zapíná vícevláknovost podle počtu CPU.

Minifikace CSS přes esbuild

// esbuild: CLI příkaz pro minifikaci JS a 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 přijímá konfiguraci na jeden řádek. minify: true zapíná minifikaci pro JS i CSS. sourcemap: true generuje mapy kódu pro ladění. target určuje minimální úroveň ES — esbuild automaticky transpiluje moderní kód na vybranou verzi. esbuild je obzvláště účinný v projektech, kde je doba sestavení kritická: CI/CD pipeline, Hot Module Replacement a rychlé prototypování.

Minifikace v React Native a WebView

React Native používá Metro Bundler — vlastní bundler, který zahrnuje minifikaci založenou na Terseru. V produkčním režimu Metro automaticky aplikuje minifikaci na JavaScript bundle aplikace. Konfigurace minifikace v Metru se nastavuje přes metro.config.js v sekci transformer.minifierConfig. Dále lze vypnout inline-require pro zmenšení velikosti bundle na iOS.

WebView v mobilních aplikacích také těží z minifikace. HTML, CSS a JS načítané do WebView musí projít minifikací před vložením do aplikace nebo načtením ze serveru. Pro místní zdroje (Assets) je minifikace obzvláště důležitá — velikost APK/IPA přímo ovlivňuje konverzi instalací v obchodech s aplikacemi.

Hermes a minifikace

Hermes — JavaScript engine pro React Native, vyvinutý Facebookem. Hermes provádí Ahead-of-Time (AOT) kompilaci bajtkódu, což snižuje dobu spouštění aplikace o 30–50%. Pro Hermes se minifikace JavaScript bundle provádí před kompilací do bajtkódu pomocí Terseru. Hermes podporuje vlastní formát HBC (Hermes Bytecode), ale fáze JS minifikace zůstává nezbytná.

Konfigurace Metro pro React Native

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

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

Metro s minifierConfig.drop_console odstraňuje všechny console.log z produkčního bundle React Native. Parametr mangle.safari10 zabraňuje přejmenovávání identifikátorů, které poškozují Safari 10 (iOS 10). To je obzvláště důležité pro aplikace podporující stará zařízení iPad a iPhone 5s s iOS 10/11.

Čím se liší minifikace od komprese

Minifikace a komprese (gzip, brotli) jsou různé fáze optimalizace. Minifikace pracuje na úrovni zdrojového kódu a snižuje počet znaků před odesláním na server. Komprese pracuje na úrovni transportního protokolu a je aplikována serverem (nginx, Apache, CDN) při přenosu souboru klientovi. Minifikace snižuje velikost před kompresí, což poskytuje dvojitý efekt: gzip komprimuje již zkrácená data.

Velikost JavaScript souboru 300 KB po minifikaci — 120 KB, po gzip — 35–40 KB. Pokud je gzip aplikován pouze na neminifikovaný soubor, velikost bude 55–70 KB. Minifikace + gzip poskytuje o 30–40% lepší výsledek než samotný gzip. Brotli (úroveň 6) komprimuje po minifikaci o 15–20% účinněji než gzip.