Компрессоры JavaScript: как и зачем минимизировать JS

Содержание

1 Что значит Minify?
2 Как выглядит минимизированный код?
3 Как вы минимизируете?
4 Предостережения

Мы все были там, вы узнали, как создать потрясающий сайт

, но как только вы публикуете это, это невыносимо медленно.

Сокращение вашего JavaScript является одним из способов ускорить время отклика сайта (наряду со сжатием HTML

) и, к счастью для вас, это простой процесс. Сегодня я покажу вам все, что вам нужно знать.

Что значит Minify?

Процесс минификация (или же Минимизация) это простая концепция. Когда вы пишете код на JavaScript или любом другом языке, существует множество функций, которые необходимы только для того, чтобы облегчить понимание кода людьми — компьютерам не важно, как вы называете свои переменные, или как много пробелов в скобках, для пример.

Минимизируя код, вы можете резко уменьшить его размер. Поэтому для ваших пользователей загрузка файла будет меньше. Если вы пишете только одну или две строки JavaScript, вероятно, заметного улучшения не будет. Однако, если вы пишете много кода или используете большие библиотеки, такие как jQuery, заметное увеличение производительности и резкое уменьшение размеров файлов легко достижимы!

Если вы загружаете код с внешнего CDN

такие как Google Hosted Libraries, вы использовали минимизированный код.

Как выглядит минимизированный код?

Давайте посмотрим на некоторые примеры. Трудно увидеть влияние минификации на небольшие базы кода, поэтому я заранее прошу прощения за их длинную длину.

Вот некоторые unminified JavaScript из нашего руководства по использованию JSON с Python и JavaScript:

// setup some JSON to use
var cars = [
{ "make":"Porsche", "model":"911S" },
{ "make":"Mercedes-Benz", "model":"220SE" },
{ "make":"Jaguar","model": "Mark VII" }
];
window.onload = function() {
// setup the button click
document.getElementById("theButton").onclick = function() {
doWork()
};
}
function doWork() {
// ajax the JSON to the server
$.post("receiver", cars, function(){
});
// stop link reloading the page
event.preventDefault();
}

Вот минимизированный код:

function doWork(){$.post("receiver",cars,function(){}),event.preventDefault()}var cars=[{make:"Porsche",model:"911S"},{make:"Mercedes-Benz",model:"220SE"},{make:"Jaguar",model:"Mark VII"}];window.onload=function(){document.getElementById("theButton").onclick=function(){doWork()}};

Эта уменьшенная версия кода 39 процентов меньше. В этом примере имена переменных остаются прежними, но все пробелы и комментарии были удалены.

Вот еще один пример из нашего руководства по jQuery:

// dfd == deferred
var dfd = $.Deferred();
function doThing() {
$.get('some/slow/url', function() {
dfd.resolve();
});
return dfd.promise();
}
$.when(doThing()).then(function(){
console.log('YAY, it is finished');
});

Вот минимизированный код:

function doThing(){return $.get("some/slow/url",function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log("YAY, it is finished")});

На этот раз был только 26 процентов сокращение — это все еще очень хорошо для такого незначительного блока кода.

Вот последний пример из нашего руководства по Javascript и DOM:

//declare a new variable to hold a new h1 element
var newHeading = document.createElement("h1");
//add the text node to the document
var h1Text = document.createTextNode("Heading Level 1");
//make it a child node of the new heading
newHeading.appendChild(h1Text);
//append this as a child of element defined as "bt"
document.getElementById("bt").appendChild(newHeading);

Обратите внимание, как много комментариев и пробелов. Минимизированная версия уменьшила размер файла на 52 процента :

var newHeading=document.createElement("h1"),h1Text=document.createTextNode("Heading Level 1");newHeading.appendChild(h1Text),document.getElementById("bt").appendChild(newHeading);

Вот размеры некоторых распространенных библиотек JavaScript по сравнению с их уменьшенными версиями:

Highcharts: 1 МБ> 201 КБ
jQuery: 270 КБ> 90 КБ
MooTools: 164 КБ> 93 КБ

Некоторые из этих библиотек показывают значительное уменьшение размера при сжатии (~ 80 процентовв то время как другие не совсем так хороши (~ 40 процентов). Тем не менее, любое сохранение сделает ваш сайт быстрее для ваших пользователей и уменьшит нагрузку на ваш веб-сервер.

Как вы минимизируете?

Теперь вы знаете, как это работает и как это выглядит, давайте рассмотрим, как это сделать. Не волнуйтесь, вам не нужно ничего менять вручную! Есть множество свободно доступных инструментов, которые управляют процессом для вас.

Они работают несколькими способами. Большинство онлайн-инструментов позволяют вам копировать и вставлять код, который они затем обработают и вернут вам на странице. Эти инструменты часто позволяют вам загружать несколько файлов.

Вот краткий обзор онлайн-инструментов. Они в основном работают одинаково, поэтому вам не нужно слишком беспокоиться о том, какой из них выбрать.

JSCompress — Я лично пользуюсь этим сайтом чаще всего, если это просто быстрая работа. Это быстро работает, и они даже показывают вам инструменты, которые они использовали для его создания.

Minifier JavaScript — этот инструмент работает хорошо, но он действительно сияет как API. Это позволяет вам создать собственную интеграцию или сервис поверх существующего веб-сайта.

JavaScript Minifier — еще один веб-сайт с тем же именем, этот инструмент так же прост, как они приходят. Нет вариантов или меню, только одна кнопка.

Minify — этот сайт выглядит потрясающе, и разработчики явно обратили внимание на детали здесь.

Этот список может продолжаться вечно. Существует так много онлайн-инструментов для минимизации сайтов, что трудно ошибиться.

Минимизирующие инструменты также существуют как инструменты командной строки или плагины для вашего редактора JavaScript.

, Эти инструменты часто намного быстрее в использовании и «просто работают» с существующим кодом. Нет необходимости копировать и вставлять, и вам не нужно извлекать свой JavaScript из любого HTML или CSS, который может быть в том же файле.

Если вы используете Microsoft Visual Studio, расширение Bundler and Minifier с рынка имеет более 600 000 установок! Кроме того, он регулярно обновляется и доступен на GitHub.

Если вы являетесь поклонником Sublime Text, как и я, тогда вам нужен пакет Minify. С более чем 61 000 установок это очень популярный пакет, который также доступен на GitHub, если вы хотите внести свой вклад в проект с открытым исходным кодом.

Наконец, если вы являетесь пользователем PyCharm, вы можете настроить его для непосредственной интеграции со многими распространенными инструментами сжатия, такими как компрессор YUI. Многие из этих инструментов напрямую используются для онлайн-инструментов, перечисленных выше.

Предостережения

Должен быть подвох, верно? Ничто не может быть идеальным. Ну, да, есть одна проблема, но она довольно незначительна и легко обходится:

Минимизированный код не может быть восстановлен в исходное состояние.

Когда вы минимизируете любой код, его первоначальная форма теряется. Вам нужно сохранить его копию, если вы хотите иметь какие-либо надежды на простое внесение серьезных изменений — недостаточно использовать контроль версий

Хотя ваш код можно унифицировать, он никогда не будет прежним. Все ваши ценные комментарии потеряны, с одной стороны.

Это не большая проблема, но вы должны помнить об этом при кодировании. Как правило, несжатый > разработка и сжатый > производство.

Теперь вы знаете все, что нужно знать о минимизации JavaScript! Сокращение кода — один из способов выжать производительность сервера, и все крупные сайты делают это.

Какие инструменты вы используете для минимизации вашего кода? Вы вообще беспокоитесь? Дайте нам знать в комментариях ниже!

Изображение предоставлено: NavinTar через Shutterstock