Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Мінімізація коду». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке мінімізація

**Мінімізація (minification)** - це процес **видалення всього зайвого** з вихідного коду (JS, CSS, HTML),
що **не впливає на виконання програми**, але **зменшує розмір файлів**.

Після мінімізації код залишається коректним, але стає **максимально компактним**.

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

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

## Приклад

### До мінімізації:

```javascript
function sum(a, b) {
  // складаємо два числа
  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 економія ще більша.

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

Браузеру при завантаженні потрібно:

1. Завантажити JS/CSS/HTML-файли;
2. Розпарсити, виконати, відмалювати сторінку.

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

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

## Переваги мінімізації

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

## Де використовується

Мінімізація застосовується до:

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

## Чим мінімізація відрізняється від обфускації

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

## Інструменти

| Мова | Популярні інструменти |
|---|---|
| **JS** | [Terser](https://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-стиснення при деплої (наприклад, через Vercel/CDN).

## Приклад реальної вигоди

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

При поганому мобільному з'єднанні це економить **1-2 секунди завантаження**!

## Підсумок

| Що робить | Навіщо |
|---|---|
| Видаляє зайві символи, пробіли і коментарі | Зменшує розмір файлів |
| Прискорює завантаження сторінки | Покращує UX і SEO |
| Знижує навантаження на мережу і сервер | Економить ресурси |
| Застосовується автоматично при збірці | Проста оптимізація "задарма" |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати566 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.