Мінімізувати JavaScript _

Як працює мінімізація JavaScript

Terser працює у чотири стадії над абстрактним синтаксичним деревом вашого коду. Кожна стадія незалежна, тому будь-яку з них можна увімкнути або вимкнути, не порушуючи інші.

1. Розбір. Terser розбирає ваш JavaScript в AST. Будь-яка синтаксична помилка спливає тут — з токеном і рядком, що її викликали, — тож ви знаходите справжню проблему до запуску будь-яких перетворень. Парсер приймає всі стандартні конструкції ECMAScript аж до останніх пропозицій четвертої стадії.
2. Стиснення. Компресор обходить AST і застосовує десятки семантично безпечних перетворень: згортка констант, усунення мертвих гілок, інлайн коротких чистих функцій, згортання послідовних оголошень var і переписування еквівалентних форм операторів (if/else у тернари, скорочення ланцюжків порівнянь, згортання умовних повернень). Кожне перетворення принципово оборотне; компресор ніколи не змінює спостережувану поведінку.
3. Маглінг. Манглер перейменовує локальні прив'язки на найкоротші унікальні ідентифікатори (a, b, c, …) у межах кожної області видимості. Перейменовуються лише імена, що не можуть вийти за межі модуля, тому експортовані прив'язки, ключі властивостей і глобальні посилання залишаються недоторканими. Саме цей етап дає найбільшу економію байтів.
4. Виведення. Terser друкує перетворене AST назад у рядок JavaScript зі згорнутими пробілами та розділювачами операторів, зведеними до мінімуму, який приймає граматика. Коментарі видаляються, якщо тільки перемикач збереження ліцензій не залишає блоки /*! … */, які більшість CDN-ліцензій вимагає зберігати.

Навіщо мінімізувати JavaScript

• Швидше завантаження сторінок. Менші скрипти розбираються та виконуються швидше. При мобільному з'єднанні 4G скорочення на 40% економить реальні секунди до Time to Interactive — саме цей показник Google PageSpeed Insights вимірює найактивніше.
• Менші витрати на CDN egress. CloudFront, Cloudflare та Fastly беруть плату за гігабайт вихідного трафіку. Скорочення скрипта на 40% при мільйонах переглядів на місяць складається у реальну економію ще до оптимізації зображень або CSS. Математика працює навіть з урахуванням gzip і brotli — мінімізація видаляє токени, які інакше довелося б кодувати компресору.
• Цей мінімізатор не навантажує вашу сторінку. Terser займає ~1 МБ у нестиснутому вигляді. Більшість онлайн-мінімізаторів завантажують усю бібліотеку при відкритті сторінки, що обвалює їхній власний показник Lighthouse і робить сторінку млявою ще до того, як користувач щось надрукує. Ця сторінка завантажує Terser ліниво — лише коли ви натискаєте «Мінімізувати» або вмикаєте живий режим, — тому початковий рендеринг залишається в межах порогів Core Web Vitals, яких інструмент обіцяє допомогти вам досягти.
• Проходження Core Web Vitals. Lighthouse і PageSpeed Insights відзначають великий JavaScript як пряму причину поганого Total Blocking Time. Мінімізація вендорних бібліотек і бандлів застосунку — найшвидший виграш в аудитах Lighthouse «Скоротіть невикористаний JavaScript» і «Видаліть дублюючі модулі» — зазвичай одноразове скорочення коштує десяти-двадцяти балів.

Типові застосування

Мінімізація JavaScript присутня майже на кожному етапі сучасного веб-проєкту.

• Хуки pre-commit: мінімізуйте окремі утилітарні скрипти перед комітом у репозиторій, щоб зафіксований артефакт був готовий до продакшну, а diff відображав логічні зміни, а не пробільний шум.
• Аудит сторонніх віджетів: вставте сніппет для вбудовування від вендора та перевірте, чи вже він мінімізований або чи може бути стиснутий додатково перед обслуговуванням мільйонам користувачів.
• Очищення застарілих скриптів: стискайте старі jQuery-плагіни та написані вручну скрипти, створені до вашого поточного конвеєра збірки, не зачіпаючи вихідне дерево.

Практичний приклад

Візьмемо невелику функцію: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — близько 130 байт з урахуванням коментаря. Вставте її вище при увімкнених маглінгу та стисненні. Вивід скоротиться приблизно до function add(n,o){return n+o}console.log(add(1,2)); — близько 55 байт, скорочення на 58%. Ім'я функції add зберігається, оскільки на нього є посилання у виклику console.log; імена параметрів firstNumber і secondNumber скорочуються до однієї літери, бо вони локальні для тіла функції. Вимкніть маглінг, щоб зберегти читабельні імена параметрів і водночас все одно згорнути пробіли та прибрати коментар.

FAQ

Це працює у моєму браузері?

Так. Terser завантажується ліниво при першому натисканні «Мінімізувати» або вмиканні живого режиму — близько 200 КБ стиснутих потрапляє в кеш браузера, після чого нічого більше не скачується. Ваш код ніколи не залишає сторінку.

Що таке маглінг імен і чи він безпечний?

Маглінг перейменовує локальні змінні на одну літеру для економії байтів. Це безпечно для автономних скриптів і IIFE-бандлів, оскільки перейменування ніколи не виходять за межі області видимості. Небезпечно для скриптів, що відкривають глобальні змінні за іменем (наприклад, window.myLib = …) без обгортки. Вимикайте маглінг, якщо сумніваєтесь.

Чому мій код зламався після мінімізації?

Три звичайних підозрюваних: eval або with, що звертаються до змінних за рядком; читання Function.name або arguments.callee, що залежать від вихідного ідентифікатора; глобальні змінні, відкриті за іменем, яке було перейменовано. Спочатку вимкніть маглінг, щоб зрозуміти причину — у перейменуванні чи в перетворенні стиснення.

Чи підтримується сучасний синтаксис (ES2020+)?

Так. Встановіть цільовий стандарт ECMAScript ES2020 або Next — і Terser збереже опціональні ланцюжки, нульове злиття, await на верхньому рівні та оператори логічного присвоєння. Встановіть ES5 — і Terser знизить версію там, де може, але це не повний транспілятор: використовуйте Babel для синтаксису, який ES5 взагалі не підтримує.

Браузерна мінімізація JavaScript з Terser дає вивід продакшн-якості без додавання інструменту збірки. Вставте скрипт, виберіть цільовий стандарт ECMAScript, скопіюйте або завантажте результат. Нічого не завантажується, без акаунту, без конвеєра. Сам мінімізатор завантажується тільки на вимогу — тому відкриття цієї сторінки коштує вам кілька кілобайт, а не мегабайт.