Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Мініфікація коду». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Мініфікація, це видалення з вихідного коду (JS, CSS, HTML) усього, що не впливає на виконання програми, але збільшує розмір файлу: пробілів, переносів рядків, коментарів, довгих імен змінних, зайвих крапок з комою та дужок.** Після мініфікації код залишається коректним, але стає максимально компактним, тому браузер швидше його завантажує, парсить і виконує. Типовий JS-бандл втрачає 50 до 70 відсотків ваги, а разом з gzip чи brotli економія ще більша. Менша вага означає нижчу затримку мережі, швидший парсинг, кращі метрики FCP і LCP, менше навантаження на сервер та CDN і менші витрати батареї на мобільних. Сучасні збирачі (Webpack, Vite, Rollup, Parcel, Next.js) вмикають мініфікацію автоматично в production-збірці разом з tree-shaking. ```javascript // до: ~90 байт function sum(a, b) { // add two numbers return a + b; } console.log(sum(2, 3)); // після: ~45 байт function sum(n,o){return n+o}console.log(sum(2,3)); ``` **Ключове:** мініфікація зменшує розмір файлів без зміни поведінки коду, і це найдешевша оптимізація швидкості завантаження, бо вмикається однією опцією збирача.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Мініфікація (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, імена властивостей об'єктів і рядкові ключі мініфікатор за замовчуванням не чіпає, бо це зламало б код. ### Як це впливає на швидкість Браузеру під час завантаження сторінки потрібно: 1. Завантажити файли JS, CSS і HTML. 2. Розпарсити їх, виконати та відмалювати сторінку. Чим менша вага файлів, тим: - швидший мережевий відгук (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-імпорт затягне в бандл усе.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.