Minification — що це, принципи мініфікації та інструменти для коду

Що таке Minification?

Minification — це автоматичне перетворення вихідного коду, при якому видаляються всі символи, що не впливають на виконання програми. Пробіли, табуляції, символи нового рядка, коментарі та зайві дужки видаляються або скорочуються. Minification застосовується до JavaScript, CSS, HTML і, рідше, до JSON-конфігурацій перед розгортанням у продакшен.

Головна мета мініфікації — зменшення розміру файлів, що передаються мережею. Файл JavaScript розміром 300 КБ після мініфікації може займати 120–150 КБ, що скорочує час завантаження на 200–400 мс при повільному 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) — видалення гілок коду, які ніколи не виконуються. Мініфікатор аналізує умови, які завжди false (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.

Чим мініфікація відрізняється від стиснення

Minification та стиснення (gzip, brotli) — різні етапи оптимізації. Мініфікація працює на рівні вихідного коду та зменшує кількість символів до відправки на сервер. Стиснення працює на рівні транспортного протоколу та застосовується сервером (nginx, Apache, CDN) при передачі файлу клієнту. Мініфікація зменшує розмір до стиснення, що дає подвійний ефект: gzip стискає вже скорочені дані.

Розмір файлу JavaScript 300 КБ після мініфікації — 120 КБ, після gzip — 35–40 КБ. Якщо застосувати тільки gzip до немініфікованого файлу, розмір становитиме 55–70 КБ. Minification + gzip дає на 30–40% кращий результат, ніж gzip окремо. Brotli (рівень 6) стискає додатково на 15–20% ефективніше за gzip після мініфікації.