Compressori JavaScript: come e perché minimizzare il tuo JS

Compressori JavaScript: come e perché minimizzare il tuo JS

Ci siamo passati tutti, hai imparato come costruire un fantastico sito web , ma una volta pubblicato, è insopportabilmente lento.





Minimizzare il tuo javascript è un modo per accelerare i tempi di risposta del sito web (insieme a compressione HTML ), e fortunatamente per te, è un processo facile. Oggi ti mostrerò tutto quello che c'è da sapere.



Cosa significa minimizzare?

Il processo di minificazione (o minimizzare ) è un concetto semplice. Quando scrivi codice in JavaScript o in qualsiasi altro linguaggio, ci sono molte funzionalità che sono necessarie solo per rendere il codice più facile da capire per gli umani: ai computer non importa come chiami le tue variabili o quanto spazio c'è intorno alle parentesi, Per esempio.





Minimizzando il codice, puoi ridurre drasticamente le dimensioni del file. Un file più piccolo sarà quindi più veloce da scaricare per i tuoi utenti. Se stai scrivendo solo una o due righe di JavaScript, probabilmente non ci sarà un miglioramento evidente. Tuttavia, se stai scrivendo molto codice o utilizzando librerie di grandi dimensioni come jQuery, è facile ottenere notevoli aumenti delle prestazioni e dimensioni dei file drasticamente ridotte!

Se carichi il codice da un CDN esterno, come Librerie ospitate da Google , hai utilizzato il codice minimizzato.



cosa significa questa emoji??

Che aspetto ha il codice minimizzato?

Diamo un'occhiata ad alcuni esempi. È difficile vedere l'impatto della minimizzazione su piccole basi di codice, quindi mi scuso in anticipo per la loro lunga durata.

Eccone un po' non minimizzato JavaScript dalla nostra guida all'utilizzo di JSON con Python e 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();
}

Ecco il codice minimizzato:

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

Questa versione ridotta del codice è 39 percento più piccoli. In questo esempio, i nomi delle variabili rimangono gli stessi, ma tutti gli spazi bianchi ei commenti sono stati rimossi.



Ecco un altro esempio dalla nostra guida a 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');
});

Ecco il codice minimizzato:

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

Questa volta c'era solo un 26 percento riduzione - è ancora molto buono per un blocco di codice così piccolo.

Ecco un ultimo esempio dalla nostra guida a Javascript e al 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);

Nota come ci sono Un sacco di commenti e spazi bianchi. La versione ridotta ha ridotto la dimensione del file di 52 percento :

perché il mio Amazon Fire Stick non funziona?
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Ecco le dimensioni di alcune librerie JavaScript comuni rispetto alle loro versioni ridotte:

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

Alcune di queste librerie mostrano una significativa riduzione delle dimensioni quando vengono compresse ( ~80 percento ), mentre altri non sono altrettanto buoni ( ~40 percento ). Detto questo, qualsiasi risparmio renderà il tuo sito web più veloce per i tuoi utenti e ridurrà lo sforzo sul tuo server web.

Come si minimizza?

Ora che sai come funziona e che aspetto ha, vediamo come farlo. Non preoccuparti, non è necessario modificare manualmente il codice! Ci sono una varietà di strumenti liberamente disponibili che gestiscono il processo per te.

Questi funzionano in diversi modi. La maggior parte degli strumenti online ti consente di copiare e incollare il codice, che verrà quindi elaborato e restituito alla pagina. Questi strumenti spesso ti consentono di caricare anche più file.

Ecco un breve riepilogo degli strumenti online. Per lo più funzionano allo stesso modo, quindi non devi preoccuparti troppo di quale scegliere.

JSCompress -- Personalmente uso di più questo sito web se è solo un lavoro veloce. È veloce da eseguire e ti mostrano persino gli strumenti che hanno usato per costruirlo.

JavaScript Miniifier -- Questo strumento funziona bene, ma brilla davvero come API . Ciò ti consente di creare la tua integrazione o servizio in cima al loro sito Web esistente.

JavaScript Minifier: un altro sito Web con lo stesso nome, questo strumento è semplice come viene. Nessuna opzione o menu, solo un pulsante.

Minimizza -- Questo sito Web sembra fantastico e gli sviluppatori hanno chiaramente prestato attenzione ai dettagli qui.

Questa lista potrebbe continuare all'infinito. Ci sono così tanti strumenti online per minimizzare i siti web che è difficile sbagliare.

Gli strumenti di minimizzazione esistono anche come strumenti da riga di comando o plug-in per il tuo Editor JavaScript . Questi strumenti sono spesso molto più veloci da usare e 'funzionano' semplicemente con il codice esistente. Non è necessario copiare e incollare e non è necessario estrarre il codice JavaScript da alcun codice HTML o CSS che potrebbe trovarsi nello stesso file.

Se stai utilizzando Microsoft Visual Studio, il Bundler e Miniifier l'estensione dal marketplace ha oltre 600.000 installazioni! Non solo, ma è regolarmente aggiornato e disponibile su GitHub .

Se sei un fan di Testo sublime come me, allora il Minimizza il pacchetto è quello che vuoi. Con oltre 61.000 installazioni, è un pacchetto molto popolare e anche disponibile su GitHub , se desideri contribuire a un progetto open source .

Infine, se sei un PyCharm utente, puoi configuralo per l'integrazione direttamente con molti strumenti di compressione comuni come Compressore YUI . Molti di questi strumenti alimentano direttamente gli strumenti online sopra elencati.

Avvertenze

Là ha essere una cattura vero? Niente potrà mai essere perfetto. Bene, sì, c'è un problema, ma è abbastanza minore e facilmente aggirabile:

Il codice minimizzato non può essere ripristinato allo stato originale.

Quando minimizzi un codice, la sua forma originale viene persa. È necessario conservarne una copia se si desidera avere qualche speranza di apportare facilmente modifiche importanti: non è sufficiente utilizzare il controllo di versione.

Mentre è possibile sminuire il tuo codice, non sarà mai più lo stesso. Tutti i tuoi preziosi commenti sono persi, per prima cosa.

Questo non è un grosso problema, ma è necessario tenerlo a mente durante la codifica. Come regola di base, non compresso > sviluppo e compresso > produzione.

Ora sai tutto quello che c'è da sapere sulla minimizzazione di JavaScript! La minimizzazione del codice è uno dei modi per spremere le prestazioni di un server e tutti i grandi siti Web lo stanno facendo.

Quali strumenti usi per minimizzare il tuo codice? Ti preoccupi anche tu? Fateci sapere nei commenti qui sotto!

giochi da fare con gli amici al telefono

Credito immagine: NavinTar tramite Shutterstock

Condividere Condividere Tweet E-mail Elimina questi file e cartelle di Windows per liberare spazio su disco

Hai bisogno di liberare spazio su disco sul tuo computer Windows? Ecco i file e le cartelle di Windows che possono essere eliminati in sicurezza per liberare spazio su disco.

Leggi Avanti Argomenti correlati
  • Programmazione
  • JavaScript
  • Giava
  • Web design
Circa l'autore Joe Coburn(136 articoli pubblicati)

Joe si è laureato in Informatica presso l'Università di Lincoln, nel Regno Unito. È uno sviluppatore di software professionista e quando non pilota droni o scrive musica, lo si può trovare spesso a scattare foto o produrre video.

Altro da Joe Coburn

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti