Мініфікація коду

JavaScriptJunior~4 хв читання

Мініфікація (minification), це процес видалення з вихідного коду всього зайвого, що не впливає на виконання програми, але збільшує розмір файлів. Після мініфікації код залишається коректним, просто стає максимально компактним, і браузер отримує його швидше.

Теорія

TL;DR

Мініфікація прибирає пробіли, переноси рядків, коментарі та скорочує імена локальних змінних.
Поведінка коду не змінюється, змінюється лише його вага.
Типова економія: 50 до 70 відсотків розміру бандла, а з gzip або brotli ще більше.
Менший файл, це швидша мережа, швидший парсинг і кращі FCP та LCP.
Застосовується до JS, CSS, HTML, а часто й до JSON та SVG.
Мініфікація не дорівнює обфускації: перша оптимізує розмір, друга приховує логіку.
Усі сучасні збирачі роблять це автоматично в production-режимі.

Швидкий приклад

javascript

// до мініфікації
function sum(a, b) {
  // add two numbers
  return a + b;
}
console.log(sum(2, 3));

javascript

// після мініфікації
function sum(n,o){return n+o}console.log(sum(2,3));

Було приблизно 90 байт, стало приблизно 45 байт, тобто мінус 50 відсотків розміру. А після стиснення gzip чи brotli на сервері економія буде ще відчутнішою.

Що саме видаляється

Що видаляється	Приклад
Пробіли й табуляції	`function test () { ... }` стає `function test(){...}`
Переноси рядків	символи `\n` видаляються
Коментарі	`/* опис */` видаляється
Довгі імена змінних	`let counter = 0;` стає `let a=0;`
Невикористаний код (dead code)	прибирається через tree-shaking
Зайві крапки з комою та дужки	оптимізуються

Важливо: скорочуються лише локальні імена, які не видно ззовні. Публічні API, імена властивостей об'єктів і рядкові ключі мініфікатор за замовчуванням не чіпає, бо це зламало б код.

Як це впливає на швидкість

Браузеру під час завантаження сторінки потрібно:

Завантажити файли JS, CSS і HTML.
Розпарсити їх, виконати та відмалювати сторінку.

Чим менша вага файлів, тим:

швидший мережевий відгук (latency);
швидший парсинг і виконання;
менший час до першого рендеру (FCP, LCP);
нижче навантаження на сервер і CDN.

Мініфікація допомагає на обох етапах: менше байтів іде мережею і менше символів треба розібрати парсеру JavaScript.

Переваги та де застосовується

Перевага	Що дає
Швидше завантаження	Менше даних, отже швидша сторінка
Менше трафіку	Економія на мережі та на оплаті CDN
Швидше на мобільних	Знижується витрата батареї та CPU
Кращий SEO	Пошукові системи враховують швидкість сайту
Код важче читати	Трохи підвищує захист, але це не обфускація

Мініфікацію застосовують до:

JavaScript (.js);
CSS (.css);
HTML (.html);
JSON та SVG (часто автоматично);
інколи навіть до inline-скриптів і стилів у розмітці.

Мініфікація проти обфускації

Параметр	Мініфікація	Обфускація
Мета	Зменшити розмір	Приховати логіку коду
Впливає на продуктивність	Так, пришвидшує	Ні, часто навпаки уповільнює
Зрозумілість коду	Стає менш читабельним	Зрозуміти майже неможливо
Приклади інструментів	Terser, UglifyJS, csso	javascript-obfuscator

Мініфікація, це оптимізація, а обфускація, це захист. Обфускований код зазвичай стає більшим і повільнішим, бо в нього навмисно додають зайві перетворення.

Інструменти та налаштування збірки

Мова	Популярні інструменти
JS	Terser (`github.com/terser/terser`), UglifyJS, SWC, esbuild
CSS	cssnano, CleanCSS, csso
HTML	html-minifier, posthtml-minifier
Збирачі	Webpack, Vite, Rollup, Parcel, роблять це автоматично при `NODE_ENV=production`

Приклад для Webpack:

javascript

// webpack.config.js
optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin(),
    new CssMinimizerPlugin(),
  ],
}

У Next.js, React, Vite та інших сучасних збирачах мініфікація увімкнена за замовчуванням у production-збірці:

javascript

npm run build

Збирач автоматично мініфікує JS і CSS, видаляє невикористаний код через tree-shaking, а gzip або brotli стиснення зазвичай додає вже хостинг чи CDN під час деплою.

Реальна вигода виглядає приблизно так:

Тип файлу	До мініфікації	Після мініфікації	Економія
JS bundle	1.2 MB	340 KB	-72%
CSS bundle	280 KB	85 KB	-70%
HTML	45 KB	30 KB	-33%

На поганому мобільному з'єднанні це економить одну або дві секунди завантаження.

Типові помилки

Плутати мініфікацію із захистом коду. Мініфікований код легко відновити до читабельного вигляду будь-яким beautifier, секрети й ключі в бандлі залишаються секретами лише формально.
Не вантажити source maps. Без них стек трейси в production перетворюються на a is not a function у рядку 1, і дебажити помилки стає майже неможливо.
Покладатися на імена функцій у рантаймі. Після мініфікації fn.name і constructor.name змінюються, тому логіка, побудована на них, ламається.
Мініфікувати вже мініфікований файл. Подвійна обробка нічого не дає, а іноді псує вихідний код або ламає ліцензійні коментарі.
Розраховувати, що мініфікація замінить стиснення. gzip і brotli дають окремий великий виграш, їх треба вмикати на сервері додатково.
Забувати про мертвий код у бібліотеках. Tree-shaking працює лише з ES-модулями, CommonJS-імпорт затягне в бандл усе.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.