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

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

Мы все были там, вы узнали как создать отличный веб-сайт , но как только вы его опубликуете, он становится невыносимо медленным.





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



Что означает сокращение?

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





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

Если вы загружаете код из внешнего CDN, например Библиотеки, размещенные в Google , вы использовали минимизированный код.



как подключить wii к смарт-телевизору

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

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

Вот некоторые необученный 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 процента :

Windows 10 требует вечности для входа в систему
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

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

  1. Диаграммы: 1 МБ> 201 КБ
  2. jQuery: 270 КБ> 90 КБ
  3. MooTools: 164 КБ> 93 КБ

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

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

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

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

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

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

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

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

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

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

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

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

Если ты фанат Возвышенный текст как я, то Уменьшить пакет - это тот, который вам нужен. С более чем 61 000 установками, это очень популярный пакет, а также доступно на GitHub , если вы хотите внести свой вклад в проект с открытым исходным кодом.

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

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

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

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

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

Пока можно уничтожить ваш код, он больше никогда не будет прежним. Во-первых, все ваши ценные комментарии потеряны.

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

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

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

ярлыки на рабочем столе не работают Windows 10

Кредит изображения: NavinTar через Shutterstock

Делиться Делиться Твитнуть Эл. адрес Удалите эти файлы и папки Windows, чтобы освободить место на диске

Вам нужно очистить дисковое пространство на вашем компьютере с Windows? Вот файлы и папки Windows, которые можно безопасно удалить, чтобы освободить место на диске.

Читать далее Похожие темы
  • Программирование
  • JavaScript
  • Джава
  • Веб-дизайн
Об авторе Джо Кобурн(136 опубликованных статей)

Джо закончил факультет компьютерных наук Линкольнского университета в Великобритании. Он профессиональный разработчик программного обеспечения, и когда он не пилотирует дроны и не пишет музыку, его часто можно встретить фотографирующим или снимающим видео.

Ещё от Joe Coburn

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!

Нажмите здесь, чтобы подписаться