Compressori JavaScript Come e perché minimizzare JS

Siamo stati tutti lì, hai imparato a costruire un fantastico sito web Come creare un sito web: per principianti Come creare un sito web: per principianti Oggi ti guiderò attraverso il processo di creazione di un sito Web completo da zero. Non ti preoccupare se questo sembra difficile. Ti guiderò in ogni fase del percorso. Leggi di più, ma una volta che lo pubblichi, è insopportabilmente lento.

Minimizzare il javascript è un modo per accelerare i tempi di risposta del sito Web (insieme alla compressione di HTML come funziona l'HTML compresso e perché potrebbe essere necessario il modo in cui funziona l'HTML compresso e il motivo per cui potrebbe essere necessario In questo articolo verranno illustrati i due metodi principali per HTML compresso, perché i file HTML dovrebbero essere ridotti e come risolverli. Ulteriori informazioni) e, fortunatamente per te, è un processo semplice. Oggi ti mostrerò tutto ciò che devi sapere.

Cosa significa Minify?

Il processo di minification (o Minimizzando) è un concetto semplice. Quando scrivi codice in JavaScript o in qualsiasi altra lingua, ci sono molte funzioni che sono necessarie solo per rendere il codice più facile da comprendere per gli umani: i computer non si preoccupano di ciò che chiamate le variabili, o quanto spazio ci sia tra parentesi, per esempio.

Minimizzando il codice, è possibile ridurre drasticamente la dimensione del file. Un file più piccolo sarà quindi più veloce da scaricare per gli utenti. Se stai scrivendo solo una o due righe di JavaScript, probabilmente non ci sarà un miglioramento evidente. Tuttavia, se stai scrivendo un sacco di codice, o utilizzando librerie di grandi dimensioni come jQuery, aumenti evidenti delle prestazioni e dimensioni dei file drasticamente ridotte sono facilmente ottenibili!

Se si carica il codice da un CDN esterno Cosa sono i CDN e perché lo spazio di archiviazione non è più un problema Quali sono i CDN e perché lo spazio di archiviazione non è più un problema I CDN rendono Internet veloce e i siti Web accessibili anche quando si scalano milioni di utenti. In primo luogo, la larghezza di banda costa denaro; quelli di noi con contratti limitati lo sanno fin troppo bene. Non solo tu ... Leggi di più, come Google Hosted Libraries, hai usato il codice minisito.

Come appare il codice minisito?

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

Ecco alcuni unminified JavaScript dalla nostra guida all'utilizzo di JSON con Python e JavaScript:

// imposta alcuni JSON per usare var cars = ["make": "Porsche", "model": "911S", "make": "Mercedes-Benz", "model": "220SE",  "make": "Jaguar", "model": "Mark VII"]; window.onload = function () // imposta il pulsante click document.getElementById ("theButton"). onclick = function () doWork ();  function doWork () // Ajax the JSON al server $ .post ("receiver", cars, function () ); // interrompe il collegamento ricaricando la pagina event.preventDefault (); 

Ecco il codice miniato:

function doWork () $. post ("receiver", cars, function () ), event.preventDefault () var cars = [make: "Porsche", modello: "911S", make: " Mercedes-Benz ", modello:" 220SE ", marca:" Jaguar ", modello:" Mark VII "]; window.onload = function () document.getElementById (" theButton "). Onclick = function () lavora();

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

Ecco un altro esempio della 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, è finito'););

Ecco il codice miniato:

function doThing () return $ .get ("some / slow / url", function () dfd.resolve ()), dfd.promise () var dfd = $. Deferred (); $. when (doThing ()). then (function () console.log ("YAY, è finito"));

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 per Javascript e il DOM:

// dichiara una nuova variabile per contenere un nuovo elemento h1 var newHeading = document.createElement ("h1"); // aggiungi il nodo di testo al documento var h1Text = document.createTextNode ("Intestazione di livello 1"); // crea un nodo figlio della nuova intestazione newHeading.appendChild (h1Text); // aggiungi questo elemento come elemento figlio definito come "bt" document.getElementById ("bt"). appendChild (newHeading);

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

var newHeading = document.createElement ("h1"), h1Text = document.createTextNode ("Intestazione di livello 1"); newHeading.appendChild (h1Text), document.getElementById ("bt"). appendChild (newHeading);

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

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

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

Come fai a ridurre?

Ora sai come funziona e come appare, immergiti nel modo in cui farlo. Non preoccuparti, non è necessario modificare manualmente il tuo codice! Ci sono una varietà di strumenti disponibili gratuitamente 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 elaborerà e ritornerà sulla pagina. Questi strumenti ti consentono spesso di caricare più file.

Ecco una breve carrellata degli strumenti online. Lavorano principalmente allo stesso modo, quindi non devi preoccuparti troppo di quale scegliere.

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

JavaScript Minifier: questo strumento funziona bene, ma in realtà è un'API. Questo ti consente di creare la tua integrazione o servizio sulla parte superiore del 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.

Minify: questo sito 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 minificare i siti web che è difficile sbagliare.

Gli strumenti di minimizzazione esistono anche come strumenti a riga di comando o plugin per il tuo editor JavaScript I 5 migliori editor di Javascript per codificatori e programmatori produttivi I 5 migliori editor di Javascript per codificatori e programmatori produttivi In questi giorni, ci sono solo cinque editori che meritano considerazione quando si scrive JavaScript. Puoi trovare dozzine di alternative, ma nessuna di esse ti dà una candela, quindi non perdere tempo. Leggi di più . Questi strumenti sono spesso molto più veloci da usare e “solo lavoro” con il tuo codice esistente. Non è necessario copiare e incollare e non è necessario estrarre il codice JavaScript da HTML o CSS che potrebbero trovarsi nello stesso file.

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

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

Infine, se sei un utente PyCharm, puoi configurarlo per integrarlo direttamente con molti strumenti di compressione comuni come il compressore YUI. Molti di questi strumenti alimentano direttamente gli strumenti online elencati sopra.

Avvertenze

Là ha essere una cattura giusta? Niente può mai essere perfetto. Beh, sì, c'è un problema, ma è abbastanza piccolo e facilmente funzionante:

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

Quando si minimizza qualsiasi codice, la sua forma originale viene persa. È necessario conservarne una copia se si vuole avere qualche speranza di apportare facilmente modifiche importanti: non è sufficiente utilizzare il controllo di versione. Che cos'è Git e Perché si dovrebbe utilizzare il controllo della versione Se si è uno sviluppatore Cos'è il Git e il perché? Dovrebbe usare il controllo della versione se sei uno sviluppatore Come sviluppatori web, molto spesso tendiamo a lavorare su siti di sviluppo locali, quindi basta caricare tutto quando abbiamo finito. Questo va bene quando sei solo tu e le modifiche sono piccole, ... Per saperne di più .

Mentre è possibile annullare l'estrazione del codice, non è mai più lo stesso. Tutti i tuoi preziosi commenti sono persi, per una cosa.

Questo non è un problema enorme, 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 su come minicare JavaScript! Il codice minifying è uno dei modi per spremere le prestazioni da un server e tutti i grandi siti web lo fanno.

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

Immagine di credito: NavinTar tramite Shutterstock

Scopri di più su: Java, JavaScript, Web Design.