Менші файли для продакшену, читабельний код для налагодження
Цей мініфікатор стискає CSS, JavaScript і HTML для продакшену й точно показує, скільки ви заощадили: початковий розмір, розмір після мініфікації та розмір після gzip — саме стільки насправді завантажують ваші відвідувачі. JavaScript мініфікується за допомогою terser, який використовує більшість сучасних інструментів збирання, а CSS — за допомогою csso, який ще й об’єднує повторювані правила. Перемкніться в режим «Форматувати», щоб перетворити мініфікований бандл або таблицю стилів назад на читабельний код із відступами. Код обробляється у вашому браузері й нікуди не завантажується.
Як мініфікувати або відформатувати код
- 1Виберіть мову: CSS, JavaScript або HTML. Якщо перетягнути в поле введення файл
.css,.jsабо.html, мову буде вибрано автоматично. - 2Виберіть Мініфікувати, щоб стиснути код, або Форматувати, щоб зробити його читабельним.
- 3Налаштуйте параметри: для JavaScript — чи скорочувати імена й чи стискати код; для CSS — чи перебудовувати правила; для HTML — чи мініфікувати вбудовані стилі та скрипти. Ліцензійні коментарі зберігаються, якщо ви цього не вимкнете.
- 4Перегляньте розміри під результатом, щоб побачити економію до й після gzip.
- 5Скопіюйте результат або завантажте його як
.min.js,.min.cssчи.html.
Що робить мініфікація
Мініфікація видаляє все, що браузеру не потрібно для виконання коду: коментарі, відступи, переноси рядків і необов’язкові крапки з комою. Добрі мініфікатори йдуть далі. terser перейменовує локальні змінні на однолітерні (mangling), видаляє недосяжний код, заздалегідь обчислює константні вирази й перетворює оператори if на тернарні. csso скорочує кольори (#ff0000 стає red), прибирає одиниці в нульових значень і об’єднує правила з однаковими оголошеннями або селекторами.
Результат працює точно так само, як оригінал, але зазвичай на 30–70% менший для JavaScript і на 15–40% менший для CSS до стиснення.
Чому важливий розмір після gzip
Вебсервери й CDN стискають текстові файли за допомогою gzip або Brotli перед надсиланням, тож на швидкість завантаження впливає стиснений розмір, а не початковий. Стиснення вже прибирає більшу частину повторів, на які спрямована мініфікація, тому економія в 60% після мініфікації може перетворитися на 20% після gzip. Це все одно варто робити для кожного перегляду сторінки, а скорочення імен особливо добре працює й після стиснення.
Значення gzip тут розраховано для рівня 6 — стандартного для nginx і більшості серверів. Brotli зазвичай дає ще на 10–20% менше.
Опис параметрів
- Скорочувати імена
- Перейменовує локальні змінні й параметри функцій на короткі імена. Глобальні імена та властивості об’єктів ніколи не змінюються, тож код, який викликають інші скрипти, і далі працює.
- Стискати
- Для JavaScript — проходи оптимізації terser: видалення мертвого коду, згортання констант, інлайнінг. Для CSS — реструктуризація csso, яка об’єднує й переставляє правила, коли це безпечно.
- Зберігати ліцензійні коментарі
- Зберігає коментарі, що починаються з /*! або містять @license чи @preserve: багато open-source-ліцензій вимагають їх залишати.
- Вбудовані CSS і JS
- У HTML мініфікує вміст елементів <style> і <script> та атрибутів style. Блоки JSON-LD теж стискаються; скрипти інших типів не змінюються.
- Прибирати лапки в атрибутах
- Пише class=nav замість class="nav", де це дозволяє HTML. Це валідний HTML, але деякі XML-інструменти та шаблонізатори його не люблять, тому за замовчуванням параметр вимкнено.
Як мініфікується HTML
Мініфікація HTML тут навмисно обережна. Коментарі видаляються, крім умовних коментарів Internet Explorer. Послідовності пробілів зводяться до одного пробілу, а пробіли поруч із блоковими елементами на кшталт <div> і <p>, де вони ніколи не відображаються, видаляються. Між рядковими елементами завжди лишається один пробіл, інакше <b>big</b> <i>world</i> злилися б в одне слово. Вміст <pre> і <textarea> ніколи не змінюється.
Якщо у вбудованому скрипті є синтаксична помилка, він лишається в початковому вигляді, а вам повідомляється номер рядка — замість того щоб ламалася вся сторінка.
Форматування мініфікованого коду
Форматування використовує js-beautify, щоб заново розставити відступи: одна інструкція на рядок для JavaScript, одне оголошення на рядок для CSS і вкладені відступи для HTML. Це найшвидший спосіб прочитати мініфікований сторонній скрипт або розібратися в таблиці стилів, скопійованій із браузера. Початкові імена змінних і коментарі, видалені мініфікатором, повернути не можна, але структура стає зрозумілою.
Для інших форматів є JSON Formatter і форматувальник SQL.
Поширені запитання
- Мій код кудись завантажується?
- Ні. terser, csso і js-beautify працюють у вашому браузері, тож код лишається на вашому пристрої.
- Чи працюватиме мініфікований JavaScript?
- Так. terser вносить лише зміни, що зберігають поведінку. Коду, який під час виконання залежить від імен функцій чи класів, наприклад деяким фреймворкам впровадження залежностей, може знадобитися вимкнути скорочення імен.
- Чи підтримується сучасний JavaScript і ES-модулі?
- Так. terser розуміє сучасний синтаксис, зокрема класи, async/await, optional chaining і top-level await. Файли з інструкціями import або export мініфікуються як ES-модулі.
- Чи можна мініфікувати TypeScript або JSX?
- Ні. Спершу скомпілюйте TypeScript або JSX у JavaScript, а потім мініфікуйте результат. Якщо код не є звичайним JavaScript, буде показано синтаксичну помилку з рядком і стовпцем.
- Чим мініфікація відрізняється від gzip?
- Мініфікація переписує сам код, роблячи його коротшим. Gzip — це стиснення, яке сервер застосовує до будь-якого файлу під час надсилання. Вони працюють разом: спершу мініфікуйте, потім нехай сервер стискає.
- Чи можна «розмініфікувати» JavaScript або CSS?
- Так. Виберіть «Форматувати», щоб заново розставити відступи в мініфікованому коді. Початкові імена змінних і коментарі не відновити, але структура стане читабельною.
- Чому правила мого CSS об’єднуються або переставляються?
- Це реструктуризація csso, яка об’єднує правила з однаковими оголошеннями або селекторами. Для звичайних таблиць стилів це безпечно; вимкніть «Стискати», якщо ви покладаєтеся на точний порядок правил між селекторами з однаковою специфічністю.