14 инструментов для минимизации JavaScript
Минификация Javascript - это метод, который сокращает ваш сценарий в гораздо меньшую площадь. Вы теряете удобочитаемость, но сохраняете значительную пропускную способность - в конце концов, Javascript предназначен для вашего браузера, а не для ваших пользователей.
Большинство производственных веб-сайтов используют минимизацию Javascript, но способы достижения этого сильно различаются. От простых онлайн-конвертеров до более комплексных инструментов с графическим интерфейсом и интерфейсов командной строки наши варианты довольно разнообразны. В этой статье мы рассмотрим как работает минификация Javascript, как мы можем встроить это в наш рабочий процесс и каковы плюсы и минусы минимизации.
Как работает минификация
Лучший способ узнать, что происходит, когда вы минимизируете свой код, это взглянуть на репозиторий UglifyJS Github. Этот скрипт используется во многих онлайн-конвертерах, а также в инструментах с графическим интерфейсом и командной строке, таких как Grunt. Вот некоторые из преобразований, которые он применяет, чтобы сделать ваш код короче:
- Удаляет ненужное пространство
- Сокращает имена переменных, обычно до отдельных символов
- Присоединяется к последовательным объявлениям var
- Преобразует массивы в объекты, где это возможно
- Оптимизирует ли заявления
- Вычисляет простые константные выражения
- так далее.
В качестве быстрого примера, вот функция, которая по существу записывает некоторый заданный текст.
function hello (text) document.write (text);
привет («Добро пожаловать в статью»);
Давайте посмотрим, что произойдет, когда мы минимизируем это. Обратите внимание на удаление пробелов и отступов и сокращение текстовой переменной.
function hello (e) document.write (e) hello ("Добро пожаловать в статью") Инструменты минимизации JavaScript
Инструменты, используемые для минимизации Javascript, можно разделить на 3 группы: онлайн-инструменты, инструменты с графическим интерфейсом и инструменты командной строки..
- С онлайн-инструментами обычно нужно вставить свой код и немедленно скопировать результат..
- Инструменты GUI часто содержат гораздо больше функциональности; JS минификация - лишь малая часть того, что они делают.
- Инструменты командной строки также обычно более полны, предлагая минимизацию в виде модуля.
Интернет Инструменты
- javascript-minifier.com - красивый инструмент с API
- Онлайн YUI Compressor - более мощный инструмент, использующий компрессор YUI, с большим количеством опций и возможностью минимизации CSS.
- jscompress.com - миниатор без излишеств, но он выполняет свою работу
- jsmini.com - это еще один простой, но полезный вариант
Самое замечательное в онлайн-инструментах - это скорость, с которой вы можете работать с ними. Сложный графический интерфейс и инструменты командной строки сокращаются быстрее, но для правильной работы необходимо настроить проект. Недостатком этих инструментов является то, что они в основном предоставить мало или нет настройки, по крайней мере, по сравнению с инструментами командной строки.
GUI Инструменты
- Коала - это бесплатный инструмент для LESS, SASS-компиляции, JS-минификации и многого другого
- Prepros - платное кроссплатформенное приложение, которое дает вам еще больше возможностей
- Codekit - мое приложение по выбору. Это платное приложение для Mac, которое предлагает компиляцию кода, минификацию, сервер предварительного просмотра, управление пакетами и многое другое.
- AjaxminGui - это бесплатный специализированный инструмент Windows для минимизации JS
- UltraMinifier - бесплатное приложение для OS X, которое минимизирует CSS и JS с помощью перетаскивания
- Меньше - это инструмент OS X, который минимизирует и объединяет файлы для вас
Я упомянул два типа приложений с графическим интерфейсом здесь. Простые одношаговые приложения минимизации очень похожи на их онлайн-аналоги. Они чрезвычайно быстры в использовании, так как вы можете просто перетаскивать файлы в них, никаких настроек не требуется. Тем не менее, они обеспечить практически без настройки.
Большие графические инструменты (Prepros, Koala, Codekit) отлично подходят для управления проектами и дают вам немного больше возможностей для сжатия, но они делают нужно немного настройки. Быстрая JS-минификация займет около 20 секунд, что достаточно, по сравнению с 2-секундным процессом онлайн или простых инструментов с графическим интерфейсом..
С другой стороны, они предлагают вам больше возможностей в целом и предоставляют вам автоматизацию. Ваши JS-файлы будут минимизированы каждый раз, когда вы сохраняете их, нет необходимости вручную их минимизировать. Если вы разрабатываете что-то в Javascript, это, безусловно, путь.
Инструменты командной строки
- Minify предназначен для тех, кто хочет минимизировать JS из командной строки, но не хочет настраивать что-либо необычное в Grunt или Gulp.
- Uglify.js, о котором мы упоминали ранее, также доступен в качестве автономного инструмента командной строки
- Grunt имеет расширение для минимизации Javascript, которое называется grunt-contrib-uglify.
- В Gulp также есть JS-минификация с использованием Uglify.js через gulp-uglify.
Инструменты командной строки не только для фанатов Linux! Я не очень хорош в терминале, но настроить такие вещи, как Grunt и Gulp легко благодаря их великолепной документации. Преимущество инструментов командной строки - это невероятная гибкость, которую вы получаете от вариантов до вывода.
С другой стороны, есть немного кривой обучения. Привыкаю к командной строке занимает немного (не много) практики, которые вы найдете ограничительным прежде чем начать пользоваться преимуществами.
обзор
Если вы новичок в веб-разработке, я бы порекомендовал один из первых трех инструментов с графическим интерфейсом. Они помогут вам управлять вашими проектами в целом и предложат гораздо больше, чем просто JS-минификация..
Если вы опытный профессионал, вам стоит Ворчание или глоток поскольку они предлагают больше контроля над задачами автоматизации. Если вам нужно быстро минимизировать скрипт без настройки проекта, инструменты командной строки могут сэкономить вам много времени.
У каждой группы инструментов есть свои плюсы и минусы, и в действительности вы, вероятно, в конечном итоге будете использовать один из них в тот или иной момент. Имейте в виду, что в производственной среде вы всегда должны минимизировать свой Javascript и CSS!
