Come minimizzare JavaScript: una guida dettagliata per sviluppatori principianti

Sommario:

1. Perché minimizzare JavaScript? #
2. I vantaggi della minimizzazione di JavaScript #
3. Minificazione vs offuscamento #
4. Strumenti online per minimizzare JavaScript #
5. Minimizza JavaScript con altri strumenti e servizi #

Perché minimizzare JavaScript?

Come ho già accennato, la minimizzazione del codice è un modo per migliorare le prestazioni e la velocità delle tue pagine web. Per dimostrare l'aspetto della minificazione JavaScript, dai un'occhiata al seguente esempio di codice, che è una comune funzione di antirimbalzo JavaScript:

 let doResizeResult = () => { console .log( window .innerWidth); } // main function let debounce = ( callback, delay ) => { let myTimeout; return () => { clearTimeout(myTimeout); myTimeout = setTimeout( () => { callback() }, delay); }; }; let doDebounce = debounce( () => doResizeResult(), 1000 ) window .addEventListener( 'resize' , () => doDebounce()); Linguaggio del codice: JavaScript ( javascript )

Il codice sopra è facile da leggere, ha un rientro corretto, include spazi tra gli operatori e doppia spaziatura tra determinate righe di codice. Non è necessario scrivere JavaScript in questo modo, ma aiuta con la leggibilità. Questo esempio include anche un commento all'interno del codice.

Se dovessi utilizzare un minificatore JavaScript per minimizzare quel codice, sarebbe simile a questo:

 let doResizeResult= () => { console .log( window .innerWidth)},debounce= ( e,d )=> { let n; return () => {clearTimeout(n),n=setTimeout( () => {e()},d)}},doDebounce=debounce( () => doResizeResult(), 1e3 ); window .addEventListener( "resize" ,()=>doDebounce()); Linguaggio del codice: JavaScript ( javascript )

Ho incollato la versione di facile lettura dello snippet di codice in un minificatore JavaScript online (vedi gli esempi più avanti). Il minificatore ha generato un'altra versione dello stesso identico pezzo di codice, solo che ora il codice è minimizzato. Ciò significa che gli spazi e le interruzioni di riga non necessari vengono rimossi per garantire che il codice sia il più piccolo possibile. In questo caso, ha rimosso anche il commento al codice.

Tieni presente che non minimizzerai mai il codice JavaScript che intendi modificare e mantenere. Questo sarebbe controproducente. La minimizzazione di JavaScript è per il codice che invierai al tuo sito Web di produzione. Se stai lavorando su JavaScript in un ambiente di sviluppo, manterrai intatta la versione pre-minimizzata del codice.

I vantaggi della minimizzazione di JavaScript

Per darti un'idea di quanta dimensione del file viene salvata quando minimizzi uno snippet come quello sopra:

• Prima della minificazione: 384 byte
• Dopo la minificazione: 232 byte

Questo sarebbe solo per la minimizzazione e non include altre forme di compressione come gzip. Inoltre, non utilizza una forma di minimizzazione che riduca la dimensione dei nomi delle variabili, dei nomi delle funzioni e di altre parti del codice. Ora immagina che questo tipo di miglioramento venga apportato su centinaia di righe di codice! Questo è un grande impulso alle prestazioni della tua app solo con la semplice minimizzazione.

Questo dovrebbe dimostrare a sufficienza perché vorresti esaminare come minimizzare JavaScript. Ma prima di passare agli strumenti che puoi utilizzare per minimizzare JavaScript, considererò brevemente un altro argomento correlato.

Minificazione vs offuscamento

La minimizzazione di JavaScript non è la stessa cosa dell'offuscamento di JavaScript. Detto questo, è vero che la minificazione renderà il tuo JavaScript più difficile da leggere. Ma non è completamente "offuscato" ed è facile abbellire (ovvero "annullare") il codice JavaScript. L'offuscamento JavaScript sembra molto diverso.

Torniamo allo stesso frammento della sezione precedente. Ecco come sarebbe quello snippet quando lo eseguo attraverso un offuscatore JavaScript online:

 var _0xc3ef=[ "\x69\x6E\x6E\x65\x72\x57\x69\x64\x74\x68" , "\x6C\x6F\x67" , "\x72\x65\x73\x69\x7A\x65" , "\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72" ]; let doResizeResult= () => { console [_0xc3ef[ 1 ]]( window [_0xc3ef[ 0 ]])}; let debounce= ( _0xf855x3,_0xf855x4 )=> { let _0xf855x5; return () => {clearTimeout(_0xf855x5);_0xf855x5= setTimeout( () => {_0xf855x3()},_0xf855x4)}}; let doDebounce=debounce( () => { return doResizeResult()}, 1000 ); window [_0xc3ef[ 3 ]](_0xc3ef[ 2 ],()=>{ return doDebounce()}) Linguaggio del codice: JavaScript ( javascript )

Sebbene alcune parti del codice siano ancora intatte, puoi vedere che la maggior parte del codice è completamente diversa e illeggibile.

Lo scopo dell'offuscamento JavaScript è quello di non consentire ad altri di "rubare" il codice, minimizzandolo. Ma questo è in qualche modo uno sforzo inutile poiché il codice può essere tecnicamente "deoffuscato". Inoltre, le tecnologie front-end fanno parte della piattaforma web aperta e quindi il codice JavaScript è difficile da proteggere tramite copyright.

Pertanto, puoi minimizzare solo JavaScript; L'offuscamento di JavaScript è eccessivo nella maggior parte dei casi.

Strumenti online per minimizzare JavaScript

Ora che ho trattato le basi del motivo per cui vorresti minimizzare JavaScript e i suoi vantaggi, consideriamo alcuni utili strumenti online. Questi ti consentono di convertire istantaneamente il normale codice JavaScript in codice minimizzato in pochi clic.

Molti degli strumenti elencati funzionano in modo simile, ma differiscono nel modo in cui il codice può essere aggiunto (ad esempio, tramite caricamento, input diretto, ecc.). Inoltre, alcuni degli strumenti dispongono di opzioni di configurazione per tipi specifici di minimizzazione, incluse opzioni per l'offuscamento.

Minificatore JavaScript Toptal

Questo servizio di minificazione online di Toptal ti consente di minimizzare il tuo JavaScript direttamente sulla pagina. Hai anche la possibilità di minimizzarlo tramite una richiesta POST utilizzando la loro API.

Strumento di minimizzazione JavaScript di Digital Ocean

Lo strumento di minimizzazione di Digital Ocean offre una serie di diverse impostazioni di configurazione, inclusa la possibilità di rimuovere il codice inutilizzato e le istruzioni console.log() vaganti insieme alla minimizzazione. Puoi anche scegliere tra tre preimpostazioni di configurazione per una minimizzazione più rapida.

Minimizza

Minimizza è un semplice minificatore JavaScript che minimizza anche i CSS. Puoi usarlo direttamente online utilizzando lo strumento della home page o come strumento CLI che ti consentirà di minimizzare e combinare più file. Questo include anche una suite di test.

bundlejs

bundlejs è diverso dagli altri strumenti di minificazione JavaScript in questo elenco. Questo ti consente di testare in modo interattivo quali saranno le dimensioni del tuo pacchetto dopo aver combinato e minimizzato tutti i tuoi pacchetti. Puoi usarlo come minificatore o semplicemente come controllore delle dimensioni del pacchetto e ha varie opzioni di configurazione.

JSCompress

JSCompress è un minifier JavaScript online che utilizza UglifyJS e babel-minify sotto il cofano. Questo strumento ti consente di copiare e incollare il tuo codice JavaScript o di caricare uno o più file per combinare i file per la minimizzazione e la compressione.

Minificatore JavaScript di FreeFormatter.com

Questo strumento di minimizzazione online ti consente di minimizzare tramite copia/incolla diretta o tramite caricamento di file. Puoi selezionare il tipo di codifica per il tuo file e questo regolerà anche i nomi delle variabili nel codice per renderli più piccoli, per una maggiore ottimizzazione.

Minimizza JS Online

Un semplice strumento per minimizzare JavaScript tramite copia/incolla. Questo è tanto semplice quanto questi strumenti ottengono e include anche alcuni test con un clic che ti consentono di vedere come vengono minimizzate specifiche librerie JavaScript.

Minificatore JavaScript di BeautifyTools

Questo minifier online minimizzerà istantaneamente il tuo JavaScript e avrai la possibilità di inserire il tuo codice in più modi. Puoi copiare/incollare, caricare tramite URL o caricare un file JavaScript locale.

JS Minimizza

Questo strumento ti consente di minimizzare tramite input diretto oppure puoi caricare un file JavaScript. Utilmente, hai anche la possibilità di selezionare varie caselle per "manipolare" varie parti del codice (simile all'offuscamento) e conservare commenti e citazioni originali.

Minimizza JavaScript con altri strumenti e servizi

Nella maggior parte dei casi, una volta installato il CMS o il sistema di compilazione del tuo sito Web, la minimizzazione di JavaScript è qualcosa che farai automaticamente, piuttosto che manualmente. Ciò è possibile tramite plug-in e strumenti di compilazione, a seconda della configurazione.

Ad esempio, se gestisci un sito Web WordPress, ci sono plug-in che offriranno una serie di opzioni tra cui la memorizzazione nella cache dei file, la compressione e, naturalmente, la minimizzazione di CSS e JavaScript.

Se utilizzi uno dei tanti strumenti di compilazione disponibili, come Webpack, Parcel.js, esbuild, Snowpack e così via, la minificazione può essere eseguita automaticamente. Il tuo codice di sviluppo non sarà minimizzato, ma ogni volta che sarai pronto per inviare le tue modifiche alla produzione, il tuo nuovo codice verrà creato automaticamente con le funzionalità selezionate, inclusa la minimizzazione di JavaScript.

Uno strumento popolare che puoi utilizzare quando minimizzi JavaScript come parte di un processo di compilazione è UglifyJS, menzionato in precedenza. Questo è un compressore/minificatore completo che molti strumenti usano sotto il cofano e che puoi usare anche tu stesso.

Esistono anche reti di distribuzione di contenuti (CDN) e servizi correlati che ti consentono di minimizzare automaticamente il tuo JavaScript non appena viene servito dal tuo sito web. Questo è simile all'ottimizzazione dell'immagine al volo.

Uno di questi servizi è JsDelivr. JsDelivr è un CDN veloce, gratuito per progetti open source e ottimizzato per la distribuzione di contenuti JavaScript da npm e GitHub. Come spiegato nella loro documentazione:

Per prima cosa tenteremo di individuare una versione minificata del file... (rimuovendo l'estensione e cercando lo stesso file .min.js ). Se non riusciamo a trovarne uno, ci minimizzeremo.

Ciò fornisce prestazioni elevate tramite la consegna stessa, insieme alla minimizzazione se necessario.

Riepilogo di come minimizzare JavaScript

Spero che gli strumenti e i suggerimenti presentati sopra ti aiutino a capire come minimizzare JavaScript sui tuoi siti Web e app e quali sono i vantaggi. Come mostrato sopra, ci sono una serie di strumenti che puoi usare per minimizzare il tuo JavaScript. Alcuni di questi sono strumenti online che puoi utilizzare in modo interattivo. Altri fanno parte di un sistema di creazione di siti Web più ampio e talvolta utilizzano un CMS.

In ogni caso, la minimizzazione di JavaScript andrà a vantaggio dei tuoi utenti fornendo contenuti che si caricano più velocemente, consentendo una migliore esperienza utente complessiva.