14 Інструменти для мінімізації Javascript

Зменшення Javascript - це метод, який конденсує ваш скрипт на набагато меншу площу. Ви втрачаєте читабельність людини, але в кінцевому підсумку зберігаєте значну пропускну здатність, Javascript призначений для вашого веб-переглядача не для ваших користувачів.

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

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

Найкращий спосіб дізнатися, що відбувається, коли ви зменшуєте код, - ознайомитися з сховищем UglifyJS Github. Цей сценарій використовується в багатьох онлайн-перетворювачах, а також у інструментах графічного інтерфейсу та інструментах командного рядка, таких як Grunt. Ось деякі з перетворень, які застосовуються для коротшого коду:

Видаляє непотрібний простір
Скорочує імена змінних, як правило, до окремих символів
Приєднується послідовна декларація var
Перетворює масиви на об'єкти, де це можливо
Оптимізує оператори if
Обчислює прості константні вирази
тощо.

Як короткий приклад, тут наведена функція, яка, по суті, записує деякі задані тексти.

 функція hello (text) document.write (текст);

hello ("Ласкаво просимо до статті");

Давайте подивимося, що станеться, коли ми зменшимо це. Зверніть увагу на видалення пробілів і відступів і скорочення текстової змінної.

функція hello (e) document.write (e) привіт ("Ласкаво просимо до статті")

Інструменти мінімізації Javascript

Інструменти, що використовуються для мінімізації Javascript, можна розділити на 3 групи: інструменти онлайн, інструменти графічного інтерфейсу та засоби командного рядка.

За допомогою онлайнових інструментів зазвичай потрібно вставити код і негайно скопіювати результат.
Інструменти графічного інтерфейсу часто містять набагато більше функціональних можливостей; Зниження JS - це лише невелика частина того, що вони роблять.
Інструменти командного рядка також зазвичай є більш комплексними, пропонуючи мінімізацію як модуль.

Інструменти онлайн

javascript-minifier.com є привабливим інструментом з API
Інтернет-компресор YUI є більш потужним інструментом, який використовує компресор YUI, з безліччю опцій і можливостей CSI мінімізації.
jscompress.com - це міні-лічильник, але він виконує свою роботу
jsmini.com - це ще один простий, але цілком корисний варіант

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

Інструменти графічного інтерфейсу

Коала є безкоштовним інструментом для МЕНШІ, SASS компіляції, JS minification і багато іншого
Prepros - це платформна платформа, яка надає вам ще більше можливостей
Codekit - це мій вибір. Це платний додаток лише для Mac, який пропонує компіляцію коду, мінімізацію, сервер попереднього перегляду, керування пакетами bower та багато іншого
AjaxminGui - це безкоштовний, універсальний інструмент Windows для мінімізації вашого JS
UltraMinifier є безкоштовним додатком для OS X, який мінімізує CSS і JS за допомогою перетягування
Менший - це засіб для операційної системи X X, який мінімізує і об'єднує файли для вас

Я згадав тут два типи програм GUI. Прості програми з одномоментним мінімізацією подібні до їхніх онлайн-партнерів. Вони надзвичайно швидкі у використанні, оскільки ви можете просто перетягувати файли в них, не вимагаючи установки. Тим не менш, вони практично не налаштовувати.

Великі інструменти графічного інтерфейсу (Prepros, Koala, Codekit) чудово керують проектами і надають вам трохи більше варіантів стиснення, але вони роблять потрібно трохи налаштування. Швидке мінімізація JS займе близько 20 секунд налаштування, що набагато більше, ніж 2-секундний процес онлайн або простих інструментів графічного інтерфейсу..

З іншого боку, вони пропонують вам більше можливостей в цілому і надають вам автоматизацію. Ваші файли JS будуть зменшуватися кожного разу, коли ви їх зберігаєте, не потрібно вручну їх знищувати. Якщо ви щось розробляєте в Javascript, це, безумовно, шлях.

Інструменти командного рядка

Зменшити для тих, хто хоче зменшити JS з командного рядка, але не хочуть налаштовувати нічого собі в Grunt або Gulp
Uglify.js, про які ми згадували раніше, також доступний як окремий інструмент командного рядка
Grunt має розширення для мінімізації Javascript під назвою grunt-contrib-uglify
Gulp також має зменшення JS, використовуючи Uglify.js через gulp-uglify

Інструменти командного рядка не тільки для вундеркіндів Linux! Я не дуже великий у терміналі, але налаштування таких речей, як Grunt та Gulp, просте через їх велику документацію. Вгору інструментів командного рядка є величезна кількість гнучкості, яку ви маєте від опцій до виводу.

З іншого боку, є крива навчання. Звикнути до командного рядка займає деяку (не багато) практику, яку ви знайдете обмежувальною перш ніж почати користуватися перевагами.

Огляд

Якщо ви новачок у веб-розробці, я рекомендував би один з перших трьох інструментів графічного інтерфейсу. Вони допоможуть вам керувати своїми проектами взагалі і пропонують набагато більше, ніж просто JS minification.

Якщо ви досвідчений професіонал, то, напевно, варто заглянути Грунт або ковток оскільки вони пропонують найбільший контроль над завданнями автоматизації. Якщо вам потрібно швидко зменшити сценарій без створення проекту, інструменти командного рядка можуть заощадити багато часу.

Кожна група інструментів має свої плюси і мінуси, і, правда, ви, мабуть, в кінцевому підсумку використовуєте одну з кожної з них в той чи інший момент. Майте на увазі, що у виробничому середовищі потрібно завжди зменшувати JavaScript і CSS!