JavaScripti kompressorid: kuidas ja miks oma JS -i vähendada

JavaScripti kompressorid: kuidas ja miks oma JS -i vähendada

Me kõik oleme seal olnud, õppisite kuidas luua imelist veebisaiti , kuid kui selle avaldate, on see talumatult aeglane.





JavaScripti vähendamine on üks viis veebisaidi reageerimisaja kiirendamiseks (koos HTML -i pakkimine ) ja teie õnneks on see lihtne protsess. Täna näitan teile kõike, mida peate teadma.



Mida tähendab minimeerimine?

Protsess minimeerimine (või minimeeriv ) on lihtne mõiste. Kui kirjutate koodi JavaScriptis või mõnes muus keeles, on palju funktsioone, mis on vajalikud ainult inimestele arusaamise hõlbustamiseks - arvutid ei hooli sellest, kuidas te oma muutujaid nimetate või kui palju sulgusid ümber on, näiteks.



Koodi minimeerides saate selle failisuurust drastiliselt vähendada. Seetõttu saavad väiksemad failid teie kasutajatel kiiremini alla laadida. Kui kirjutate ainult ühte või kahte rida JavaScripti, siis tõenäoliselt märgatavat paranemist ei toimu. Kui aga kirjutate palju koodi või kasutate suuri teeke, näiteks jQuery, on märgatavalt suurenenud jõudlus ja drastiliselt vähendatud failisuurused!

Kui laadite koodi väliselt CDN -ilt, nt Google'i hostitud raamatukogud , kasutasite lühendatud koodi.



kuidas kasutada pärast kooli rakendust ilma Facebookita

Kuidas näeb välja lühendatud kood?

Vaatame mõningaid näiteid. Minifikatsiooni mõju väikestele koodialustele on raske näha, seega vabandan juba ette nende pika pikkuse pärast.

Siin on mõned minimeerimata JavaScripti meie juhendist JSONi kasutamiseks koos Pythoni ja JavaScriptiga:



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

Siin on lühendatud kood:

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()}};

See koodi lühendatud versioon on 39 protsenti väiksem. Selles näites jäävad muutujate nimed samaks, kuid kõik tühikud ja kommentaarid on eemaldatud.



Siin on veel üks näide meie jQuery juhendist:

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

Siin on lühendatud kood:

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')});

Seekord oli ainult a 26 protsenti vähendamine - see on ikka väga hea sellise väiksema koodiploki puhul.

Siin on viimane näide meie Javascripti ja DOM -i juhendist:

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

Pange tähele, kuidas neid on palju kommentaaridest ja tühikutest. Minimeeritud versioon vähendas failide suurust 52 protsenti :

sinise ekraani mäluhaldus Windows 10
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Siin on mõnede levinumate JavaScripti teekide suurused võrreldes nende lühendatud versioonidega:

  1. Edetabelid: 1 MB> 201 KB
  2. jQuery: 270 KB> 90 KB
  3. MooTools: 164 KB> 93 KB

Mõned neist raamatukogudest vähendavad kokkusurumisel oluliselt suurust ( ~ 80 protsenti ), samas kui teised pole nii head ( ~ 40 protsenti ). See tähendab, et mis tahes säästmine muudab teie veebisaidi teie kasutajate jaoks kiiremaks ja vähendab teie veebiserveri koormust.

Kuidas minimeerida?

Nüüd teate, kuidas see töötab ja kuidas see välja näeb, sukeldume sellesse, kuidas seda teha. Ärge muretsege, koodi pole vaja käsitsi muuta! Vabalt saadaval on mitmesuguseid tööriistu, mis seda protsessi teie jaoks lahendavad.

Need toimivad mitmel viisil. Enamik veebitööriistu võimaldab teil koodi kopeerida ja kleepida, mida nad seejärel töötlevad ja teile lehel tagasi saadavad. Need tööriistad võimaldavad sageli üles laadida ka mitu faili.

Siin on lühike ülevaade veebitööriistadest. Need töötavad enamasti samamoodi, nii et te ei pea liiga palju muretsema, millist neist valida.

JSCompress - Mina isiklikult kasutan seda veebisaiti kõige rohkem, kui see on lihtsalt kiire töö. See töötab kiiresti ja nad näitavad teile isegi tööriistu, mida nad selle ehitamiseks kasutasid.

JavaScripti minifikaator - See tööriist töötab hästi, kuid see särab tõesti API-na. See võimaldab teil oma olemasoleva veebisaidi peale luua oma integratsiooni või teenuse.

JavaScripti minifikaator - Teine sama nimega veebisait, see tööriist on nii lihtne kui nad tulevad. Pole valikuid ega menüüsid, vaid üks nupp.

Vähenda - See veebisait tundub hämmastav ja arendajad on siinsetele detailidele selgelt tähelepanu pööranud.

Seda nimekirja võiks jätkata igavesti. Veebisaitide minimeerimiseks on nii palju veebitööriistu, et on raske valesti minna.

Vähendamisvahendid on olemas ka käsurea tööriistadena või teie jaoks pistikprogrammidena JavaScripti redaktor . Neid tööriistu on sageli palju kiirem kasutada ja need lihtsalt töötavad teie olemasoleva koodiga. Pole vaja kopeerida ja kleepida ning te ei pea oma JavaScripti ekstraheerima ühestki HTML -failist või CSS -ist, mis võib olla samas failis.

Kui kasutate Microsoft Visual Studio'i, siis Bundler ja Minifier turuplatsilt on installitud üle 600 000! Mitte ainult seda, vaid seda värskendatakse regulaarselt ja saadaval GitHubis .

Kui olete fänn Ülev tekst nagu ma olen, siis Vähenda pakett on see, mida soovite. Üle 61 000 installimisega on see väga populaarne pakett ja see on ka see saadaval GitHubis , kui soovite avatud lähtekoodiga projektile kaasa aidata.

Lõpuks, kui olete a PyCharm kasutaja, saate seadistage see integreerimiseks otse paljude tavaliste tihendustööriistadega, näiteks YUI kompressor . Paljud neist tööriistadest toovad ülaltoodud veebitööriistu otse.

Hoiatused

Seal on saak olema? Miski ei saa kunagi olla täiuslik. Jah, jah, on üks probleem, kuid see on üsna väike ja hõlpsasti lahendatav:

Minimeeritud koodi ei saa taastada algsesse olekusse.

Koodi minimeerimisel kaob selle algne vorm. Kui soovite loota suurte muudatuste hõlpsaks tegemiseks, peate sellest koopia säilitama - versioonikontrolli kasutamisest ei piisa.

Kuigi on võimalik minimeerima teie kood, pole see enam kunagi sama. Kõik teie väärtuslikud kommentaarid on ühe asja pärast kadunud.

See pole suur probleem, kuid peate seda kodeerimisel meeles pidama. Põhireeglina, tihendamata > arendades ja kokkusurutud > tootmine.

Nüüd teate kõike, mida JavaScripti minimeerimise kohta teada on! Koodi vähendamine on üks viis serverist jõudluse väljapressimiseks ja seda teevad kõik suured veebisaidid.

Milliseid tööriistu kasutate oma koodi minimeerimiseks? Kas sa isegi viitsid? Andke meile sellest allpool kommentaarides teada!

siduda xbox one kontroller arvutiga bluetooth

Pildikrediit: NavinTar Shutterstocki kaudu

Jaga Jaga Piiksuma E -post Kustutage need Windowsi failid ja kaustad kettaruumi vabastamiseks

Kas vajate Windowsi arvutis kettaruumi tühjendamist? Siin on Windowsi failid ja kaustad, mida saab kettaruumi vabastamiseks turvaliselt kustutada.

Loe edasi Seotud teemad
  • Programmeerimine
  • JavaScript
  • Java
  • Veebidisain
Autori kohta Joe Coburn(136 artiklit avaldatud)

Joe on lõpetanud arvutiteaduse Ühendkuningriigi Lincolni ülikoolis. Ta on professionaalne tarkvaraarendaja ja kui ta ei lennuta droonidega ega kirjuta muusikat, võib teda sageli leida pildistamas või videoid tootmas.

Rohkem Joe Coburnilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin