ЈаваСцрипт компресори: Како и зашто минимизирати ваш ЈС

ЈаваСцрипт компресори: Како и зашто минимизирати ваш ЈС

Сви смо били тамо, научили сте како да направите сјајну веб страницу , али кад га једном објавите, то је неподношљиво споро.





Умањивање вашег јавасцрипта један је од начина да се убрза време одзива веб странице (заједно са компримовање ХТМЛ -а ), и на вашу срећу, то је лак процес. Данас ћу вам показати све што требате знати.



Шта значи умањивање?

Процес минификација (или минимизирање ) је једноставан концепт. Када пишете код на ЈаваСцрипт -у или било ком другом језику, постоје многе функције које су потребне само да би људима олакшале разумевање кода - рачунаре није брига како називате своје променљиве или колико размака има око заграда, на пример.





Смањивањем кода можете драстично смањити величину датотеке. Мања датотека ће стога корисници брже преузети. Ако пишете само један или два реда ЈаваСцрипт -а, вероватно неће бити приметног побољшања. Међутим, ако пишете много кода или користите велике библиотеке као што је јКуери, лако се могу постићи приметна повећања перформанси и драстично смањене величине датотека!

Ако учитавате код са спољног ЦДН -а, нпр Библиотеке које хостује Гоогле , користили сте скраћени код.



спољни чврсти диск не препознаје Виндовс 10

Како изгледа умањени код?

Погледајмо неке примере. Тешко је видети утицај минификације на мале базе кодова, па се унапред извињавам због њихове дугачке дужине.

Ево неких неминимизиран ЈаваСцрипт из нашег водича за употребу ЈСОН -а са Питхон -ом и ЈаваСцрипт -ом:



// 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 одсто мањи. У овом примеру називи променљивих остају исти, али су уклоњени сви размаци и коментари.



Ево још једног примера из нашег водича за јКуери:

// 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 одсто смањење - то је и даље врло добро за тако мали блок кода.

Ево последњег примера из нашег водича за Јавасцрипт и ДОМ:

//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);

Ево величина неких уобичајених ЈаваСцрипт библиотека у поређењу са њиховим умањеним верзијама:

  1. Хигхцхартс: 1 МБ> 201 КБ
  2. јКуери: 270 КБ> 90 КБ
  3. МооТоолс: 164 КБ> 93 КБ

Неке од ових библиотека показују значајно смањење величине при компримовању ( ~ 80 одсто ), док други нису баш тако добри ( ~ 40 одсто ). Међутим, свака уштеда ће учинити вашу веб локацију бржом за ваше кориснике и смањити оптерећење вашег веб сервера.

Како умањујете?

Сада знате како то функционише и како изгледа, хајде да се позабавимо како то да урадимо. Не брините, нема потребе да ручно мењате код! На располагању су различити алати који управљају процесом уместо вас.

Ово функционише на неколико начина. Већина мрежних алата вам омогућава да копирате и залепите код, који ће затим обрадити и вратити вам на страницу. Ови алати ће вам често омогућити да отпремите и више датотека.

Ево кратког прегледа онлине алата. Углавном раде исто, тако да не морате превише бринути о томе који ћете изабрати.

ЈСЦомпресс - Ја лично највише користим ову веб страницу ако је то само брз посао. Брзо се покреће и чак вам показују алате које су користили за његову израду.

ЈаваСцрипт Минифиер - Овај алат добро функционише, али заиста сјаји као АПИ. Ово вам омогућава да изградите сопствену интеграцију или услугу на њиховој постојећој веб локацији.

ЈаваСцрипт Минифиер - Још једна веб локација са истим именом, овај алат је једноставан као и они. Нема опција или менија, само једно дугме.

Умањи - Ова веб страница изгледа невероватно, а програмери су јасно обратили пажњу на детаље овде.

Ова листа би се могла наставити заувек. Постоји толико много мрежних алата за умањивање веб страница да је тешко погрешити.

Алати за умањивање такође постоје као алати командне линије или додаци за ваш ЈаваСцрипт уређивач . Ови алати су често много бржи за употребу и „само раде“ са вашим постојећим кодом. Нема потребе за копирањем и лепљењем, а не морате да издвајате свој ЈаваСцрипт из било ког ХТМЛ -а или ЦСС -а који се можда налазе у истој датотеци.

Ако користите Мицрософт Висуал Студио, Бундлер и Минифиер проширење са тржишта има више од 600.000 инсталирања! Не само то, већ се редовно ажурира и доступно на ГитХуб -у .

Ако сте љубитељ Узвишени текст као што сам ја, онда Умањи пакет је онај који желите. Са више од 61.000 инсталирања, то је веома популаран пакет, који је такође доступно на ГитХуб -у , ако желите да допринесете пројекту отвореног кода.

Коначно, ако сте а ПиЦхарм корисниче, можеш конфигуришите га за интеграцију директно са многим уобичајеним алатима за компримовање као што су ИУИ компресор . Многи од ових алата директно покрећу горе наведене мрежне алате.

Упозорења

Тамо има да буде улов, зар не? Ништа никада не може бити савршено. Па, да, постоји један проблем, али он је прилично мали и лако се решава:

Умањени код се не може вратити у првобитно стање.

Када минимизирате било који код, његов изворни облик се губи. Морате да задржите његову копију ако желите да се надате да ћете лако направити велике промене - није довољно користити контролу верзија.

Иако је могуће да се унминифи ваш код, никад више није исти. Сви ваши вредни коментари су изгубљени, као прво.

Ово није велики проблем, али морате то имати на уму приликом кодирања. Као основно правило, некомпримовано > развија и стиснут > производња.

Сада знате све што треба да знате о умањивању ЈаваСцрипт -а! Умањивање кода је један од начина да се са сервера истисну перформансе, а све велике веб странице то раде.

Које алате користите за умањивање кода? Сметаш ли уопште? Јавите нам у коментарима испод!

преузмите апликацију на самсунг смарт тв

Кредит за слику: НавинТар преко Схуттерстоцк -а

Објави Објави Твеет Емаил Избришите ове Виндовс датотеке и фасцикле да бисте ослободили простор на диску

Треба да очистите простор на диску на рачунару са оперативним системом Виндовс? Ево Виндовс датотека и фасцикли које се могу безбедно избрисати како би се ослободио простор на диску.

Прочитајте следеће Повезане теме
  • Програмирање
  • ЈаваСцрипт
  • Јава
  • Веб дизајн
О аутору Јое Цобурн(136 објављених чланака)

Јое је дипломирао рачунарство на Универзитету Линцолн, УК. Он је професионални програмер софтвера и када не лети беспилотним летелицама или не пише музику, често га се може затећи како фотографише или производи видео записе.

Више од Јоеа Цобурна

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили