Compressors JavaScript: com i per què minimitzar el vostre JS

Tots hi hem estat, heu après com construir un lloc web fantàstic , però un cop el publiqueu, és insuportablement lent.

Reduir el vostre JavaScript és una manera d’accelerar els temps de resposta del lloc web (juntament amb comprimint HTML ) i, per sort, és un procés fàcil. Avui us mostraré tot el que necessiteu saber.

Què significa Minify?

El procés de minificació (o minificació ) és un concepte senzill. Quan escriviu codi en JavaScript o en qualsevol altre idioma, hi ha moltes funcions que només són necessàries per facilitar la comprensió del codi als humans: als ordinadors no els importa el que anomeneu variables o la quantitat d’espai que hi ha entre claudàtors, per exemple.

Si reduïu el codi, podeu reduir dràsticament la mida del fitxer. Per tant, un fitxer més petit serà més ràpid per a la descàrrega dels usuaris. Si només escriviu una o dues línies de JavaScript, probablement no hi haurà una millora notable. Tanmateix, si escriviu molts codis o feu servir llibreries grans com jQuery, s’aconsegueix fàcilment un augment notable del rendiment i una reducció dràstica de la mida dels fitxers.

Si carregueu codi des d'un CDN extern, com ara Biblioteques allotjades per Google , heu utilitzat codi minificat.

escriptori remot de Windows a Ubuntu

Com és el codi minificat?

Vegem alguns exemples. És difícil veure l’impacte de la minificació en bases de codis petites, així que demano disculpes per endavant per la seva llarga durada.

Aquí en teniu algunes sense minificar JavaScript de la nostra guia per utilitzar JSON amb Python i 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();  
}

Aquí teniu el codi minificat:

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

Aquesta versió minificada del codi és 39 per cent més petit. En aquest exemple, els noms de les variables continuen sent els mateixos, però s’han eliminat tots els espais en blanc i els comentaris.

Aquí teniu un altre exemple de la nostra guia de 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');  
});

Aquí teniu el codi minificat:

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

Aquesta vegada només n'hi va haver 26 per cent reducció: encara és molt bo per a un bloc de codi tan petit.

Aquí teniu un últim exemple de la nostra guia de Javascript i el 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);

Fixeu-vos com n’hi ha molt de comentaris i espais en blanc. La versió reduïda va reduir la mida del fitxer en 52 per cent :

la millor aplicació de trucades gratuïta per a Android

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

A continuació, es mostren les mides d'algunes biblioteques JavaScript habituals en comparació amb les seves versions minificades:

Gràfics destacats: 1 MB> 201 KB
jQuery: 270 KB> 90 KB
MooTools: 164 KB> 93 KB

Algunes d’aquestes biblioteques mostren una reducció significativa de mida quan es comprimeixen ( ~ 80 per cent ), mentre que d’altres no són tan bons ( ~ 40 per cent ). Dit això, qualsevol estalvi farà que el vostre lloc web sigui més ràpid per als usuaris i redueixi la pressió del vostre servidor web.

Com es minimitza?

Ara ja sabeu com funciona i quin aspecte té, aprofundim en com fer-ho. No us preocupeu, no cal modificar el vostre codi manualment. Hi ha una gran varietat d’eines disponibles de forma gratuïta que s’encarreguen del procés.

Aquests funcionen de diverses maneres. La majoria d’eines en línia us permeten copiar i enganxar codi, que després processaran i us retornaran a la pàgina. Aquestes eines sovint també us permetran carregar diversos fitxers.

Aquí teniu un breu resum de les eines en línia. La majoria funcionen igual, de manera que no us heu de preocupar massa per triar.

JSCompress - Personalment faig servir aquest lloc web més si només és una feina ràpida. És ràpid d’executar i fins i tot us mostren les eines que feien servir per construir-lo.

Minificador JavaScript - Aquesta eina funciona bé, però realment brilla com a API. Això us permet crear la vostra pròpia integració o servei a la part superior del lloc web existent.

JavaScript Minifier: un altre lloc web amb el mateix nom, aquesta eina és tan senzilla com vénen. No hi ha opcions ni menús, només un botó.

Minimitza - Aquest lloc web sembla increïble i els desenvolupadors han clarament prestat atenció als detalls aquí.

Aquesta llista podria continuar per sempre. Hi ha tantes eines en línia per minimitzar llocs web que és difícil equivocar-se.

Les eines de reducció també existeixen com a eines de línia d'ordres o connectors per al vostre Editor de JavaScript . Aquestes eines solen ser molt més ràpides d’utilitzar i “només funcionen” amb el vostre codi existent. No cal copiar i enganxar, i no cal extreure el JavaScript de cap HTML o CSS que pugui estar al mateix fitxer.

Si utilitzeu Microsoft Visual Studio, el fitxer Agrupador i Minificador l'extensió del mercat té més de 600.000 instal·lacions. No només això, sinó que s’actualitza regularment i disponible a GitHub .

Si sou fan de Text sublim com sóc jo, llavors el Minimitza paquet és el que voleu. Amb més de 61.000 instal·lacions, és un paquet molt popular i que també ho és disponible a GitHub , si voleu contribuir a un projecte de codi obert.

Finalment, si ets un PyCharm usuari, podeu configureu-lo per integrar-lo directament amb moltes eines de compressió habituals com Compressor YUI . Moltes d’aquestes eines alimenten directament les eines en línia que s’enumeren més amunt.

Advertiments

Allà té per ser una captura no? Mai res pot ser perfecte. Bé, sí, hi ha un problema, però és bastant menor i es resol fàcilment:

El codi reduït no es pot restaurar al seu estat original.

Quan minifiqueu qualsevol codi, es perd el seu format original. N’heu de conservar una còpia si voleu tenir alguna esperança de fer canvis importants fàcilment; no n’hi ha prou d’utilitzar el control de versions.

Tot i que és possible anul·lar el vostre codi, mai no tornarà a ser el mateix. Per una banda, tots els vostres valuosos comentaris es perden.

No és un problema enorme, però cal tenir-ho en compte a l’hora de codificar. Com a norma bàsica, sense comprimir > desenvolupament i comprimit > producció.

Ara ja sabeu tot el que cal saber sobre la reducció de JavaScript. La reducció del codi és una de les maneres d’extreure el rendiment d’un servidor i ho fan tots els grans llocs web.

Quines eines utilitzeu per minimitzar el vostre codi? Fins i tot us molesteu? Feu-nos-ho saber en els comentaris següents.

els missatges de skype apareixen en un ordre incorrecte

Crèdit de la imatge: NavinTar a través de Shutterstock

Compartir Compartir Tweet Correu electrònic Suprimiu aquests fitxers i carpetes de Windows per alliberar espai al disc

Necessiteu buidar l’espai del disc a l’ordinador Windows? A continuació, es mostren els fitxers i carpetes de Windows que es poden esborrar amb seguretat per alliberar espai al disc.

Llegiu a continuació Temes relacionats

Programació
JavaScript
Java
Web Design

Sobre l'autor Joe Coburn(136 articles publicats)

Joe és llicenciat en Informàtica per la Universitat de Lincoln, Regne Unit. És un desenvolupador de programari professional i, quan no fa drons voladors ni escriu música, sovint se’l pot trobar fent fotos o produint vídeos.

Més de Joe Coburn

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us