Є кілька нескладних прийомів програмування, які можуть збільшити стисливість JS-коду.
Наприклад, ось такий скрипт:
Після мініфікаціі стане:
З іншого боку, назва функції в цьому скрипті - глобальна змінна, воно не стискається, щоб зберегти можливість звернення до функції.
З тих же причин не стискується виклик SpaceShip і методи fly. getDistance ().
Отже, зробимо якийсь більш реальний сценарій і напустимо на нього YUI Compressor.
На жаль, в YUI Compressor не можна відключити вбивання перекладів рядка, тому вийшло таке:
Якщо подивитися уважно - видно, що локальні змінні взагалі не стиснулися всередині SpaceShip. а стиснулися тільки в функції flyToMoon.
ShrinkSafe чудово стискає все, що тільки може.
Всі локальні змінні замінені на більш короткі _варіанти.
Чому YUI НЕ стиснув, а ShrinkSafe впорався?
Справа в конструкції with () в методі showWarning. Ці два компресора по-різному до неї відносяться.
ShrinkSafe ігнорує нелокальних назви змінних всередині with:
На жаль, в останній версії ShrinkSafe є баг: якщо змінна prop оголошена локально, то вона замінюється:
Наприклад, якщо val =
Втім, ніколи не чув, щоб хтось на такий баг реально напоровся. Мабуть, люди локальні змінні не оголошують однойменні з властивостями аргументу with. щоб код зрозуміліше був.
Усередині оператора with (obj) ніколи не можна точно сказати: чи буде хмарно з взята з obj або із зовнішнього області видимості.
Тому ніякі змінні всередині with стискати не можна.
А раз так - виходить, що локальні змінні з іменами, згаданими всередині with теж стискати не можна.
YUI Compressor чомусь (чому? Є ідеї?) Пішов ще далі: він не мініфіцірует взагалі ніяких локальних змінних навіть в сусідніх функціях.
ShrinkSafe любить, але з багофічей.
Якщо замінити функцію showWarning на варіант без with. то YUI стисне код без проблем:
Результат стиснення YUI без with:
У прикладі не стиснулися виклики до об'єкту document.
Для того, щоб стиск спрацювало, треба замінити звернення до глобальної змінної document викликом локальної функції.
Наприклад, ось так:
Звернення до document залишилося в одному місці, що тут же покращує стиснення:
(Тут і далі для стиснення використаний ShrinkSafe, т.к він залишає переклади рядка.
Результати YUI - по суті, такі ж)
Як правило, в інтерфейсах досить багато звернень до document. і всі вони довгі, тому цей підхід може зменшити відразу код десь на 10-20%.
Функції оголошені через var. а не function:
Це потрібно для ShrinkSafe, який стискає тільки визначення (1). Для YUI - без різниці, як оголошувати функцію, стисне і так і так.
Загальна схема фабрики об'єктів:
Принадність тут полягає в тому, що приватні змінні є локальними, і тому можуть бути стиснуті. Крім того, прибираються зайві this.
Максимально можливе використання локальних змінних, власне, і покращує мініфікацію. А деякі підходи в цій статті - лише ілюстрації.
- Версія для друку