JavaScript компресори: Как и защо да намалите JS

JavaScript компресори: Как и защо да намалите JS

Всички сме били там, научихте как да създадете страхотен уебсайт , но след като го публикувате, това е непоносимо бавно.





Минимизирането на вашия JavaScript е един от начините за ускоряване на времето за реакция на уебсайта (заедно с компресиране на HTML ) и за ваше щастие това е лесен процес. Днес ще ви покажа всичко, което трябва да знаете.



Какво означава Минифициране?

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





Чрез минимизиране на кода можете драстично да намалите размера на файла му. Следователно по -малък файл ще бъде по -бърз за изтегляне от потребителите. Ако пишете само един или два реда JavaScript, вероятно няма да има забележимо подобрение. Ако обаче пишете много код или използвате големи библиотеки като jQuery, забележимо увеличаване на производителността и драстично намален размер на файла са лесно постижими!

Ако зареждате код от външен CDN, като напр Хоствани от Google библиотеки , сте използвали минимизиран код.



каква е паролата ми за wifi android

Как изглежда минимизиран код?

Нека разгледаме някои примери. Трудно е да се види въздействието на минимизацията върху малки кодови бази, затова предварително се извинявам за тяхната дължина.

Ето някои несъкратен 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 процента :

как да извлечете blu ray
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Ето размерите на някои често срещани библиотеки на JavaScript в сравнение с техните минифицирани версии:

  1. Високи класации: 1 MB> 201 KB
  2. jQuery: 270 KB> 90 KB
  3. MooTools: 164 KB> 93 KB

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

Как минимизирате?

Сега знаете как работи и как изглежда, нека се потопим в това как да го направим. Не се притеснявайте, изобщо няма нужда да променяте ръчно кода си! Има свободно достъпни разнообразни инструменти, които се справят с процеса вместо вас.

Те работят по няколко начина. Повечето онлайн инструменти ви позволяват да копирате и поставите код, който след това ще обработят и ще ви върнат на страницата. Тези инструменти често ви позволяват да качвате и няколко файла.

Ето кратко обобщение на онлайн инструментите. Те работят предимно еднакво, така че не е нужно да се притеснявате прекалено кой да изберете.

JSCompress - Аз лично използвам този уебсайт най-много, ако това е просто бърза работа. Той работи бързо и дори ви показват инструментите, които са използвали за изграждането му.

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

JavaScript Minifier - Друг уебсайт със същото име, този инструмент е толкова прост, колкото те идват. Няма опции или менюта, само един бутон.

Минимизирайте - Този уебсайт изглежда невероятно и разработчиците ясно са обърнали внимание на подробностите тук.

Този списък може да продължи вечно. Има толкова много онлайн инструменти за минимизиране на уебсайтове, че е трудно да се обърка.

Инструментите за минимизиране също съществуват като инструменти за командния ред или плъгини за вашия JavaScript редактор . Тези инструменти често са много по -бързи за използване и „просто работят“ със съществуващия код. Няма нужда да копирате и поставяте и не е нужно да извличате JavaScript от всеки HTML или CSS, който може да е в същия файл.

Ако използвате Microsoft Visual Studio, Bundler и Minifier разширение от пазара има над 600 000 инсталирания! Не само това, но и редовно се актуализира и достъпно на GitHub .

Ако сте фен на Възвишен текст такъв, какъвто съм, тогава Минимизирайте пакетът е този, който искате. С над 61 000 инсталирания, това е много популярен пакет, който също е такъв достъпно на GitHub , ако искате да допринесете за проект с отворен код.

И накрая, ако сте PyCharm потребител, можете конфигурирайте го за интегриране директно с много често срещани инструменти за компресиране като YUI компресор . Много от тези инструменти директно захранват онлайн инструментите, изброени по -горе.

Предупреждения

Там има да бъде улов нали? Нищо никога не може да бъде перфектно. Е, да, има един проблем, но той е доста незначителен и лесно се решава:

Минимизираният код не може да бъде възстановен в първоначалното си състояние.

Когато минимизирате всеки код, първоначалната му форма се губи. Трябва да запазите копие от него, ако искате да имате надежда лесно да направите големи промени - не е достатъчно да използвате контрол на версиите.

Докато е възможно да деминифицирайте вашият код, никога повече не е същият. Всички ваши ценни коментари са загубени, от една страна.

Това не е огромен проблем, но трябва да го имате предвид при кодирането. Като основно правило, некомпресиран > развиване и компресиран > производство.

Сега знаете всичко, което трябва да знаете за минимизирането на JavaScript! Минимизирането на кода е един от начините да изтласкате производителността от сървър и всички големи уебсайтове го правят.

Какви инструменти използвате, за да минимизирате кода си? Дори притесняваш ли се? Кажете ни в коментарите по -долу!

как да използвате картата за подарък на itunes за музика на Apple

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

Дял Дял Туит електронна поща Изтрийте тези файлове и папки на Windows, за да освободите дисково пространство

Трябва да изчистите дисковото пространство на вашия компютър с Windows? Ето файловете и папките на Windows, които могат да бъдат изтрити безопасно, за да се освободи място на диска.

Прочетете Напред Свързани теми
  • Програмиране
  • JavaScript
  • Java
  • Уеб дизайн
За автора Джо Кобърн(136 статии са публикувани)

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

Още от Джо Кобърн

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате