JavaScript -kompressorit: miten ja miksi pienentää JS: ää

Olemme kaikki olleet siellä, olet oppinut miten rakentaa mahtava sivusto mutta kun julkaiset sen, se on sietämättömän hidasta.

Javascriptin pienentäminen on yksi tapa nopeuttaa verkkosivuston vasteaikoja (yhdessä HTML: n pakkaus ), ja onneksi sinulle, se on helppo prosessi. Tänään näytän sinulle kaiken, mitä sinun tarvitsee tietää.

Mitä Minify tarkoittaa

Prosessi minimointi (tai minimoiva ) on yksinkertainen käsite. Kun kirjoitat koodia JavaScriptillä tai jollakin muulla kielellä, on monia ominaisuuksia, joita tarvitaan vain helpottamaan koodin ihmisten ymmärtämistä - tietokoneet eivät välitä siitä, mitä kutsut muuttujiksi tai kuinka suuri väli on hakasulkeissa, esimerkiksi.

Pienentämällä koodia voit pienentää sen tiedoston kokoa huomattavasti. Pienempi tiedosto on siis käyttäjien nopeammin ladattavissa. Jos kirjoitat vain yhden tai kaksi JavaScript -riviä, parannusta ei todennäköisesti tapahdu. Kuitenkin, jos kirjoitat paljon koodia tai käytät suuria kirjastoja, kuten jQuery, huomattava suorituskyvyn paraneminen ja rajusti pienennetyt tiedostokoot ovat helposti saavutettavissa!

Jos lataat koodin ulkoiselta CDN: ltä, kuten Googlen isännöimät kirjastot , olet käyttänyt pienennettyä koodia.

mikä on samsung one ui home

Miltä minimoitu koodi näyttää?

Katsotaanpa joitain esimerkkejä. On vaikea nähdä minimoinnin vaikutusta pieniin koodiperustoihin, joten pahoittelen etukäteen niiden pitkää pituutta.

Tässä muutamia minimoimaton JavaScript oppaastamme JSONin käyttämiseen Pythonin ja JavaScriptin kanssa:

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

Tässä on pienennetty koodi:

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

Tämä koodin minimoitu versio on 39 prosenttia pienempi. Tässä esimerkissä muuttujien nimet pysyvät samoina, mutta kaikki välilyönnit ja kommentit on poistettu.

Tässä on toinen esimerkki jQuery -oppaastamme:

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

Tässä on pienennetty koodi:

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

Tällä kertaa oli vain a 26 prosenttia vähentäminen - se on edelleen erittäin hyvä niin pienelle koodiloholle.

Tässä on viimeinen esimerkki Javascript- ja DOM -oppaastamme:

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

Huomaa kuinka niitä on paljon kommenteista ja välilyönneistä. Pienennetty versio pienensi tiedoston kokoa 52 prosenttia :

paras tapa soittaa musiikkia autossa

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

Tässä on joidenkin yleisten JavaScript -kirjastojen koot verrattuna niiden pienennettyihin versioihin:

Highcharts: 1 Mt> 201 kt
jQuery: 270 kt> 90 kt
MooTools: 164 kt> 93 kt

Joidenkin näiden kirjastojen koko pienenee merkittävästi pakattaessa ( ~ 80 prosenttia ), kun taas toiset eivät ole niin hyviä ( ~ 40 prosenttia ). Kaikki säästöt nopeuttavat verkkosivustosi käyttäjiä ja vähentävät verkkopalvelimen kuormitusta.

Kuinka minimoit?

Nyt tiedät, miten se toimii ja miltä se näyttää, sukeltakaamme siihen, miten se tehdään. Älä huoli, koodia ei tarvitse muokata manuaalisesti! Vapaasti saatavilla on erilaisia työkaluja, jotka hoitavat prosessin puolestasi.

Nämä toimivat useilla tavoilla. Useimpien verkkotyökalujen avulla voit kopioida ja liittää koodin, jonka he sitten käsittelevät ja palauttavat sinulle sivulla. Näiden työkalujen avulla voit usein ladata myös useita tiedostoja.

Tässä on lyhyt yhteenveto verkkotyökaluista. Ne toimivat useimmiten samalla tavalla, joten sinun ei tarvitse huolehtia liikaa siitä, kumpi valita.

JSCompress - Käytän henkilökohtaisesti eniten tätä verkkosivustoa, jos se on vain nopeaa työtä. Se on nopea ajaa ja he näyttävät sinulle jopa työkalut, joita he käyttivät sen rakentamiseen.

JavaScript Minifier - Tämä työkalu toimii hyvin, mutta se todella loistaa sovellusliittymänä. Näin voit rakentaa oman integraation tai palvelun olemassa olevan verkkosivuston päälle.

JavaScript Minifier - Toinen sivusto, jolla on sama nimi, tämä työkalu on niin yksinkertainen kuin se tulee. Ei vaihtoehtoja tai valikoita, vain yksi painike.

Pienennä - Tämä sivusto näyttää hämmästyttävältä, ja kehittäjät ovat selvästi kiinnittäneet huomiota yksityiskohtiin täällä.

Tätä listaa voisi jatkaa loputtomiin. Verkkosivustojen minimoimiseksi on niin paljon online -työkaluja, että on vaikea mennä pieleen.

Pienentämistyökaluja on myös komentorivityökaluina tai laajennuksina JavaScript -editori . Nämä työkalut ovat usein paljon nopeampia käyttää ja 'toimivat vain' olemassa olevan koodisi kanssa. Sinun ei tarvitse kopioida ja liittää, eikä sinun tarvitse purkaa JavaScriptiä mistään HTML- tai CSS -tiedostosta, joka saattaa olla samassa tiedostossa.

Jos käytät Microsoft Visual Studiota, Bundler ja Minifier laajennus markkinoilla on yli 600 000 asennusta! Ei vain sitä, mutta sitä päivitetään säännöllisesti ja saatavilla GitHubista .

Jos olet fani Ylellinen teksti kuten minä olen, sitten Pienennä paketti on haluamasi. Yli 61000 asennuksella se on erittäin suosittu paketti, ja myös sellainen saatavilla GitHubista , jos haluat osallistua avoimen lähdekoodin hankkeeseen.

Lopuksi, jos olet a PyCharm käyttäjä, voit määritä se integroitavaksi suoraan monilla tavallisilla pakkaustyökaluilla, kuten YUI -kompressori . Monet näistä työkaluista käyttävät suoraan yllä lueteltuja online -työkaluja.

Varoituksia

Siellä on olla saalis oikein? Mikään ei voi koskaan olla täydellistä. Kyllä, on yksi ongelma, mutta se on melko vähäinen ja helppo kiertää:

Pienennettyä koodia ei voi palauttaa alkuperäiseen tilaansa.

Kun pienennät mitä tahansa koodia, sen alkuperäinen muoto häviää. Sinun on säilytettävä kopio siitä, jos haluat toivoa suurten muutosten tekemisestä helposti - ei riitä, että käytät versionhallintaa.

Vaikka on mahdollista unminify koodisi, se ei ole enää koskaan sama. Kaikki arvokkaat kommenttisi menetetään yhdestä syystä.

Tämä ei ole valtava ongelma, mutta se on pidettävä mielessä koodauksen aikana. Perussääntönä on, pakkaamaton > kehittää ja pakattu > tuotantoa.

Nyt tiedät kaiken, mitä JavaScriptin pienentämisestä on tiedettävä! Koodin pienentäminen on yksi tapa purkaa suorituskyky palvelimelta, ja kaikki suuret verkkosivustot tekevät sen.

Mitä työkaluja käytät koodin pienentämiseen? Oletko edes vaivautunut? Kerro meille alla olevissa kommenteissa!

miten asetetaan oletustili chromessa

Kuva: NavinTar Shutterstockin kautta

Jaa Jaa Tweet Sähköposti Vapauta levytilaa poistamalla nämä Windowsin tiedostot ja kansiot

Tarvitsetko tyhjentää levytilaa Windows -tietokoneellasi? Tässä on Windows -tiedostot ja kansiot, jotka voidaan poistaa turvallisesti levytilan vapauttamiseksi.

Lue seuraava Liittyvät aiheet

Ohjelmointi
JavaScript
Java
Web-suunnittelu

Kirjailijasta Joe Coburn(136 artikkelia julkaistu)

Joe on valmistunut tietojenkäsittelytieteestä Lincolnin yliopistosta Iso -Britanniasta. Hän on ammattimainen ohjelmistokehittäjä, ja kun hän ei lentä droneilla tai kirjoita musiikkia, hänet voidaan usein ottaa valokuvien ottamisesta tai videoiden tuottamisesta.

Lisää Joe Coburnilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi