Минификација — шта је то, принципи минификације и алати за код

Шта је минификација?

Минификација — аутоматска трансформација изворног кода, при којој се уклањају сви знакови који не утичу на извршавање програма. Размаци, табулације, знакови новог реда, коментари и вишак заграда се уклањају или скраћују. Минификација се примењује на JavaScript, CSS, HTML и ређе на JSON конфигурације пре постављања у продукцију.

Главни циљ минификације је смањење величине датотека које се преносе преко мреже. JavaScript датотека величине 300 KB након минификације може заузимати 120–150 KB, што скраћује време учитавања за 200–400 ms на спорој 3G вези. Google PageSpeed Insights и Lighthouse директно препоручују минификацију кода: то је један од критеријума за оцену перформанси и Core Web Vitals.

Минификација је неизоставни део градитељског цевовода (build pipeline). Након транспилације TypeScript-а или Babel-а, код пролази кроз Tree Shaking (уклањање некоришћених функција), затим кроз минификатор и тек онда се саставља у коначни бандл. У модерним бандлерима (Webpack, Rollup, esbuild) минификација се извршава преко плагина у завршној фази изградње.

Шта минификација уклања

Како функционише минификација: главне технике

Уклањање размака и прелома редова — најједноставнија и најочигледнија техника. Парсер минификатора пролази кроз AST (Abstract Syntax Tree) и уклања све размаке који нису део стринг литерала. Већина минификатора додатно спаја операторе у један ред, што даје додатну уштеду при компресији кроз GZip или Brotli.

Замена имена променљивих кратким именима (mangling) — агресивнија техника. Локалне променљиве и параметри функција преименују се у једнословне идентификаторе: a, b, c. Ово смањује величину за додатних 15–30%. Terser и esbuild подржавају mangling са опцијом чувања одређених имена (нпр. јавни API кроз mangle.props.reserved).

Уклањање некоришћеног кода

Dead code elimination (DCE) — уклањање грана кода које се никада не извршавају. Минификатор анализира услове који су увек лажни (if (false)) и уклања одговарајуће блокове. Напреднија анализа се обавља у фази Tree Shaking пре минификације, али DCE на нивоу минификатора хвата локалне случајеве мртвог кода који нису откривени на нивоу модула.

Скраћивање имена променљивих (Mangling)

Mangling — преименовање локалних променљивих и параметара функција у кратке идентификаторе (једно-два слова). Terser извршава mangling на основу опсега: променљиве унутар једне функције добијају јединствена кратка имена која не конфликтирају са спољним опсезима. Опција mangle.reserved омогућава чување одређених имена — на пример, јавног API-ја библиотека.

Mangling не утиче на глобалне променљиве, својства објеката (ако mangle.props није укључен) и имена класа која се користе са new. За заштиту јавног API-ја библиотека од mangling-а треба користити mangle.props.reserved са регуларним изразима: reserved: ["_prop", /^private_/]. Без овог подешавања, mangling може покварити библиотеку ако спољни код приступа својствима објекта по имену.

Пример: пре и после минификације

// Изворни код
function calculateTotal(price, tax) {
    var result = price + (price * tax);
    // Враћамо коначни збир
    return result;
}

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

// Након Terser минификације
function calculateTotal(a, b){return a + a * b}
var c = calculateTotal(100, .2);
console.log(c);

У другом примеру Terser је уклонио коментаре, размаке и преломе редова, преименовао price у a, tax у b, result у c. Величина се смањила са 197 знакова на 79 — уштеда од 60%. Притом је функционалност кода у потпуности сачувана: calculateTotal(100, 0.2) враћа 120.

Алати за минификацију: Terser, esbuild, UglifyJS

Terser — стандардни JavaScript минификатор у екосистему Webpack-а и већине модерних бандлера. Terser подржава ES6+ синтаксу (стреличасте функције, async/await, spread), mangling са заштитом јавног API-ја, source maps и паралелно покретање на број CPU-а. Од верзије 5.16, Terser укључује оптимизације за TypeScript — уклањање type-only импорта и интерфејса.

esbuild — минификатор у Go-у, уграђен у истоимени бандлер. esbuild извршава минификацију 10–100 пута брже од Terser-а захваљујући изворном коду и паралелној обради. Међутим, esbuild подржава мање оптимизација: не врши mangling са чувањем својстава, не уклања type-only импорте и мање агресивно оптимизује изразе.

Конфигурација Terser-а у Webpack-у

// webpack.config.js — подешавање 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,
      }),
    ],
  },
};

Конфигурација TerserPlugin-а укључује три кључна блока. compress је одговоран за оптимизацију израза: drop_console уклања console.log, drop_debugger уклања debugger, dead_code уклања недостижне гране. mangle управља преименовањем променљивих са reserved за заштиту јавних имена. parallel укључује вишенитност на број CPU-а.

CSS минификација кроз esbuild

// esbuild: CLI команда за минификацију JS и 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 прихвата конфигурацију у једном реду. minify: true укључује минификацију и JS и CSS. sourcemap: true генерише мапе кода за отклањање грешака. target одређује минимални ниво ES — esbuild аутоматски транспилира модеран код на изабрану верзију. esbuild је посебно ефикасан у пројектима где је време изградње критично: CI/CD цевоводи, Hot Module Replacement и брзи прототипови.

Минификација у React Native-у и WebView-у

React Native користи Metro Bundler — сопствени бандлер који укључује минификацију засновану на Terser-у. У продукционом режиму, Metro аутоматски примењује минификацију на JavaScript бандл апликације. Конфигурација минификације у Metro-у се подешава кроз metro.config.js у секцији transformer.minifierConfig. Додатно се може искључити inline-require за смањење величине бандла на iOS-у.

WebView у мобилним апликацијама такође има користи од минификације. HTML, CSS и JS који се учитавају у WebView морају проћи минификацију пре уградње у апликацију или учитавања са сервера. За локалне ресурсе (Assets) минификација је посебно важна — величина APK/IPA директно утиче на конверзију инсталација у продавницама апликација.

Hermes и минификација

Hermes — JavaScript мотор за React Native, развијен од стране Facebook-а. Hermes врши Ahead-of-Time (AOT) компилацију бајткода, што смањује време покретања апликације за 30–50%. За Hermes, минификација JavaScript бандла се обавља пре компилације у бајткод кроз Terser. Hermes подржава сопствени HBC (Hermes Bytecode) формат, али фаза JS минификације остаје неопходна.

Конфигурација Metro-а за React Native

// metro.config.js — подешавање минификације
const defaultConfig = require("metro-config/src/defaults");

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

Metro са minifierConfig.drop_console уклања све console.log из продукционог бандла React Native-а. Параметар mangle.safari10 спречава преименовање идентификатора који кваре Safari 10 (iOS 10). Ово је посебно важно за апликације које подржавају старе уређаје iPad и iPhone 5s са iOS 10/11.

По чему се минификација разликује од компресије

Минификација и компресија (gzip, brotli) су различите фазе оптимизације. Минификација ради на нивоу изворног кода и смањује број знакова пре слања на сервер. Компресија ради на нивоу транспортног протокола и примењује се од стране сервера (nginx, Apache, CDN) приликом преноса датотеке клијенту. Минификација смањује величину пре компресије, што даје двоструки ефекат: gzip компресује већ скраћене податке.

Величина JavaScript датотеке од 300 KB након минификације — 120 KB, након gzip-а — 35–40 KB. Ако се само gzip примени на неминификовану датотеку, величина ће бити 55–70 KB. Минификација + gzip даје 30–40% бољи резултат од самог gzip-а. Brotli (ниво 6) компресује додатно 15–20% ефикасније од gzip-а након минификације.