La maggior parte delle persone desidera un’esperienza di navigazione web elegante e JavaScript è stato a lungo il preferito di chi lavora nello sviluppo proprio per questa ragione.
Tuttavia, JavaScript non serve solo a rendere i siti più belli. Influenza anche direttamente le prestazioni e il successo del sito web. Accelerare un sito web o ridurre il tempo di caricamento della pagina – due concetti che sono fondamentali per lo sviluppo di JavaScript – sono fattori cruciali per migliorare l’esperienza utente.
Guarda la Nostra Video-Guida alla Minimizzazione di JavaScript
Se state cercando di migliorare le prestazioni del vostro sito web nel più breve tempo possibile, dovete familiarizzare con la minificazione di JavaScript. Vi aiuterà a escludere tutti i caratteri non necessari dal vostro codice sorgente JavaScript senza alterare la sua funzionalità. Inoltre, ridurrà il tempo di caricamento del vostro sito web e l’utilizzo della banda.
La minificazione JavaScript può essere complicata. In questo articolo, tracceremo un percorso per assistervi nella minificazione del vostro codice JavaScript sia su siti WordPress che non.
Cos’È JavaScript?
JavaScript è un linguaggio di scripting orientato al testo per creare siti web interattivi sia lato client che lato server. È un linguaggio più semplice e meno complesso da imparare rispetto ad altri, il che spiega la sua diffusione.
Mentre HTML e CSS costruiscono la struttura di un sito web, JavaScript aggiunge caratteristiche complesse e interattive al vostro sito web che migliorano il coinvolgimento degli utenti. Per esempio, JavaScript offre elementi complessi come jukebox video a scorrimento, video 2D/3D e mappe interattive.
In particolare, i browser web possono interpretare JavaScript. Quindi, insieme a HTML e CSS, è una buona scelta se vi interessa lo sviluppo web. Se avete bisogno di creare un sito web altamente interattivo che funzioni in tutti i browser senza alcun ostacolo, allora JavaScript è l’opzione più affidabile.
Cos’È la Minificazione del Codice?
La minificazione è anche conosciuta come minimizzazione. Minimizzare il codice significa ottimizzare il codice per risparmiare spazio, ridurre i tempi di caricamento della pagina e diminuire l’utilizzo della banda del sito web. Tuttavia, la preoccupazione maggiore è quella di minimizzare il codice senza alterarne la funzionalità.
La minificazione del codice è possibile in tutte le tecnologie di programmazione di base, compresi HTML, CSS e – come stiamo per vedere – JavaScript. Tuttavia, il processo non è istantaneo. C’è del lavoro da fare per rendere il codice più compatto pur mantenendolo funzionale.
Per minificare il codice JavaScript, dovete analizzarlo, comprimerlo e ottenere l’output. Una volta che è stato minificato, dovrebbe essere quasi illeggibile a occhio nudo. Avete rimosso tutti gli spazi bianchi non necessari, i commenti, i caratteri di newline e tutto ciò che inizialmente rendeva il codice leggibile.
Potreste anche dover apportare ulteriori modifiche al codice, per esempio, inlining delle funzioni, rimozione dei delimitatori di blocco, utilizzo di condizionali impliciti o riscrittura delle variabili locali.
Esempi di Codice JavaScript Non Minificato vs Minificato
Diamo un’occhiata ad alcuni esempi di codice. Questo primo blocco è un normale JavaScript non minificato:
// program to check if the string is palindrome or not
function checkPalindrome(str) {
// find the length of a string
const len = string.length;
// loop through half of the string
for (let i = 0; i < len / 2; i++) {
// check if first and last string are same
if (string[i] !== string[len - 1 - i]) {
return 'It is not a palindrome';
}
}
return 'It is a palindrome';
}
// take input
const string = prompt('Enter a string: ');
// call the function
const value = checkPalindrome(string);
console.log(value);Ora vediamo come appare lo stesso codice una volta che è stato minificato:
function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++)
if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"}
const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);Come potete vedere, il secondo blocco di codice è molto più sintetico e compatto. Questo significa che verrà caricato e reso più velocemente, riducendo il tempo di caricamento della pagina e velocizzando i contenuti.
Qui abbiamo ridotto 529 byte a 324 byte, guadagnando 205 byte di spazio libero e riducendo il caricamento della pagina di quasi il 40%.
È come prendere un libro di 529 pagine e condensarlo in un libro di 324 pagine. Naturalmente, un essere umano farebbe fatica a leggerlo, ma una macchina lo sfoglierebbe senza problemi.
Quando si collegano più file JavaScript in un singolo file minificato, la minificazione del codice diminuisce il numero di richieste HTTP al server. Questo riduce anche il consumo di banda del sito. Inoltre, la minificazione del codice riduce il tempo di esecuzione di uno scrip. Sono tutte cose che fanno diminuire il Time to First Byte (TTFB).
Perché Minimizzare il Codice JavaScript?
Quando scrivono il codice originale, la maggior parte delle sviluppatrici e degli sviluppatori si concentra principalmente sul portare a termine il compito. Mentre lo fanno tendono a usare molti commenti, spaziature e variabili per rendere il codice più leggibile per le persone che ci lavoreranno in futuro.
Nonostante sia un ottimo linguaggio di programmazione, JavaScript ha un impatto sulle pagine web e le rallenta. Per recuperare spazio e migliorare la velocità di caricamento della pagina, dovete minificare il codice JavaScript.
La versione minificata del codice JavaScript può ridurre la dimensione del file fino al 30-90%. Di conseguenza, la minificazione di JavaScript è diventata un rituale familiare per chiunque lavori nello sviluppo.
Ogni professionista che sviluppa librerie JavaScript (Angular, Bootstrap e così via) fornisce una versione minificata di JavaScript per la distribuzione in produzione. E ognuno usa un’estensione min.js per indicarlo.
Benefici della Minificazione del Codice JavaScript
Ecco una breve descrizione dei benefici che otterrete dopo aver impiegato la minificazione di JavaScript:
- Riduzione del tempo di caricamento della pagina
- Minore consumo di banda del vostro sito web
- Minor tempo di esecuzione degli script
- Meno richieste HTTP (e un carico più leggero) sul server
- Protezione dai furti (le versioni minificate sono complicate da leggere e da rubare per il riutilizzo)
Differenza tra Minificazione JavaScript, Uglification e Compressione
La minificazione, l’uglification e la compressione di JavaScript sono simili nella loro funzionalità. Tuttavia, hanno scopi diversi.
La minificazione JavaScript riscrive il codice per renderlo meno leggibile agli esseri umani. Il processo rimuove gli spazi bianchi, i punti, le virgole e i commenti mentre rinomina le variabili e le funzioni in linea per rendere il codice difficile da leggere.
JavaScript ha una libreria chiamata UglifyJS per “uglificare” il codice automaticamente. Migliora le prestazioni e diminuisce la leggibilità per rendere il codice sicuro e meno attraente per i ladri.
La compressione è diversa dalla minificazione o dall’uglification. Usa un algoritmo di compressione come GZIP per riscrivere il codice in un formato binario, rendendolo molto più piccolo e veloce da caricare.
Mentre la minificazione significa ridurre gli spazi bianchi e i commenti, l’uglification completa di un codice lo trasforma in un formato illeggibile cambiando i nomi delle funzioni, i nomi delle variabili, ecc. E la compressione riscrive il codice in binario per ridurre la dimensione del file.
Sia la minificazione che la compressione sono reversibili, il che significa che potete riportare il codice alla sua forma originale, mentre l’uglification è irreversibile.
Come Minimizzare il Codice JavaScript
Potete minificare il vostro codice JavaScript in vari modi. Ognuno di questi metodi ha un approccio diverso dagli altri.
È quasi impossibile minificare manualmente tutti i codici in grandi file JavaScript. Minificare manualmente i file JavaScript è possibile solo per piccoli file perché richiede molto tempo.
Per iniziare il processo di minificazione manuale di JavaScript, dovete aprire il vostro file JavaScript nell’editor di testo che preferite e cancellare manualmente tutti gli spazi uno dopo l’altro. Ci vorranno alcuni minuti per rimuovere tutti gli spazi e i commenti che sono stati impostati per il file JavaScript. Alcuni di questi editor di testo possono anche supportare le espressioni regolari, il che potrebbe accelerare il processo in modo significativo.
L’altra opzione è quella di installare gli strumenti di minificazione sul vostro computer e usarli dalla riga di comando. Dovreste selezionare il file che volete minificare e aggiungerlo alla riga di comando insieme al file di destinazione. Poi lo strumento di minificazione si prenderebbe cura del resto.
Come Minificare JavaScript Manualmente: I 5 Migliori Strumenti
Chi sviluppa si affida a diversi strumenti di minificazione JavaScript per minificare il codice e ottenere migliori prestazioni. Tuttavia, ogni developer ha le sue preferenze individuali e opta per uno strumento diverso. Esistono molti strumenti di minificazione JavaScript, tutti con qualità distinte, quindi dovrete considerare attentamente la vostra scelta.
Non stiamo elencando questi strumenti secondo una classifica o una categoria. Abbiamo incluso solo gli strumenti di minificazione JavaScript più efficaci e popolari.
Ecco i migliori strumenti di minificazione JavaScript che possono aiutarvi a migliorare le vostre prestazioni sul web.
1. JSMin
JSMin è uno strumento di minificazione JavaScript a riga di comando dedicato e una libreria per minificare il codice JavaScript e renderlo il più leggero possibile. Basta installare JSMin come script globale e rimuoverà tutti gli spazi bianchi e i commenti non necessari dal codice in modo molto efficace. Come risultato, può ridurre istantaneamente la dimensione del vostro file JavaScript di circa il 50%.
Quindi, la dimensione ridotta darà la possibilità di scaricarlo velocemente. Noterete anche un aumento dello stile di programmazione, che si fa più comunicativo come costo del download di nuovi self-document letterali.
Tuttavia, JSMin ha uno svantaggio: non produce un risparmio ottimale. A causa del suo algoritmo semplicistico, lascia molti caratteri di avanzamento linea invariati. In caso contrario, potrebbe introdurre nuovi bug nel codice.
2. Microsoft Ajax Minify
Microsoft Ajax Minifier vi permette di migliorare le prestazioni delle vostre applicazioni web riducendo la dimensione dei file JavaScript e CSS. Elimina i commenti, gli spazi inutili, i punti e virgola, le funzioni e le parentesi.
Oltre ad accorciare le variabili locali, i nomi delle funzioni, le virgolette/doppie virgolette, combinando dichiarazioni di variabili adiacenti, elimina i codici non eseguiti.
Con AjaxMin, potete analizzare la produttività e caricare il minificatore JS in background. E, quando completa la minificazione, potete aprire la cartella della produttività.
3. Google Closure Compiler
Google Closure Compiler è un altro eccellente strumento di minificazione di JavaScript. Formula il JavaScript per un download veloce e prestazioni più fluide. Verifica anche la sintassi e i suggerimenti di modifica, rimuove il codice morte e i type e vi avvisa sugli inconvenienti del JavaScript. Questo strumento raccoglie il vostro JavaScript, lo valuta, rimuove il codice ridondante e lo riscrive.
Inoltre, fornisce avvisi per il JavaScript illegale e le operazioni potenzialmente pericolose. Funge anche da vero e proprio compiler da un normale JavaScript a un JavaScript migliore e minimizzato.
4. YUI Compressor
YUI Compressor è uno strumento di minificazione di JavaScript e CSS a riga di comando che vi assicura un rapporto di compressione più alto della maggior parte degli altri. È uno strumento di minificazione scritto in Java e si basa su Rhino per codificare il file JavaScript sorgente.
Per prima cosa, YUI esamina il file JavaScript sorgente per determinare la sua costruzione. Poi stampa il flusso di token. Rimuove il maggior numero possibile di caratteri di spazio bianco e sostituisce tutti i simboli locali con un simbolo di 1 (o 2, o 3) lettere.
Poiché YUI Compressor è open-source, potete esaminare il codice sorgente per imparare come funziona. Inoltre, è lo strumento di minificazione JavaScript più sicuro con un rapporto di compressione eloquente.
5. UglifyJS
UglifyJS è uno degli strumenti di minificazione JavaScript più popolari. Può analizzare, minificare e comprimere il codice JavaScript. Inoltre, lo strumento genera un file di mappa sorgente durante la compressione per risalire al vostro codice originale.
Inoltre, può prendere più file di input contemporaneamente, analizzando prima i file di input e poi le opzioni.
UglifyJS analizza i file di input in ordine e applica qualsiasi opzione di compressione. I file vengono analizzati nello stesso ambito globale, il che significa che un riferimento da un file a una variabile/funzione dichiarata in un altro file sarà abbinato in modo appropriato.
Come Minimizzare JavaScript Automaticamente: I 5 Migliori Strumenti Online
Esistono tanti strumenti di minificazione JavaScript online per comprimere il vostro codice. Quasi tutti gli strumenti di minificazione JavaScript online seguono un processo di minificazione simile.
Per prima cosa, copiate e incollate il vostro codice sorgente JavaScript o caricate il file del codice sorgente sullo strumento. Poi, ottimizzate le impostazioni dello strumento di minificazione per ottenere un output specifico basato sui requisiti, se le opzioni sono disponibili.
Infine, prendete il file minificato e usatelo sul sito web al posto del codice originale espanso (anche se dovreste conservare il file originale del codice sorgente, per ogni evenienza).
Qui ci sono 5 dei migliori strumenti di minificazione JavaScript online che possono aiutarvi ad arricchire le vostre prestazioni sul web. Anche se non stiamo elencando questi strumenti in nessun ordine o categoria particolare, abbiamo incluso solo le soluzioni di minificazione JavaScript più popolari ed efficaci.
1. Toptal JavaScript Minifier
Toptal JavaScript Minifier offre un efficiente ma semplice minificatore JavaScript online dove potete condensare il vostro JavaScript in pochi secondi. Vi permette anche di convertire il codice in un file .js per un uso futuro.
2. JSCompress
JSCompress può minificare e ridurre la dimensione del vostro JavaScript dell’80%. Offre una semplice interfaccia click-and-go dove potete incollare il vostro codice o caricare il vostro file .js per la minificazione. Riceverete l’output minificato come codice pulito e copiabile piuttosto che un file . js. In particolare, lo strumento usa UglifyJS e Babel-minify per minificare e comprimere JavaScript.
3. Minifier.org
Minfier.org è uno dei più semplici minificatori JavaScript che potete usare per minificare i vostri codici. Usa diversi metodi per minificare il codice JavaScript. Lo strumento pesa la dimensione del vostro codice JavaScript sia prima che dopo la minificazione. Poi calcola il guadagno dello script dopo la minificazione e lo mostra sullo schermo.
4. TutorialsPoint Online JavaScript Minifier
Potete inserire un file .js, fornire un URL o incollare direttamente il vostro codice grezzo nello strumento di minificazione JavaScript di TutorialsPoint. Lo strumento ha un campo modificabile per codificare direttamente, se lo desiderate. Inoltre, ha un’opzione di minificazione con un solo clic e potete scaricare il codice minificato in un file . js.
5. Packer: Dean Edwards JavaScript Compressor
Se avete bisogno di comprimere il codice JavaScript, Packer di Dean Edwards potrebbe fornirvi una delle esperienze di compressione JavaScript online più soddisfacenti. Funziona con token/atom JavaScript e modelli di bit e byte.
Inoltre, vi permette di implementare l’opzione Base62 encode e Shrink variables mentre minificate il vostro codice. Per minificare il codice JS, copiatelo e incollatelo in JavaScript e premete il pulsante pack. Genererà automaticamente il codice minificato per voi.
Come Minificare JavaScript in WordPress: I 5 Migliori Strumenti e Plugin
La minificazione di JavaScript segue una procedura diversa in WordPress. La minificazione di JavaScript richiede il supporto dell’host o l’installazione di un plugin per WordPress. Dopo aver installato un plugin di minificazione per WordPress, questo si prenderà cura del processo di minificazione per voi.
Ci sono numerosi plugin WordPress per la minificazione di JavaScript. La maggior parte di questi plugin seguono la stessa procedura di minificazione e possono essere eseguiti dalla bacheca di WordPress.
Esploriamo alcuni degli strumenti più efficaci per la minificazione di JavaScript in WordPress:
1. WP Rocket
WP Rocket minifica e combina i file JavaScript e CSS e può migliorare la distribuzione non bloccante di entrambi. WP Rocket e Kinsta sono una combinazione particolarmente valida perché le capacità di caching del primo sono automaticamente disabilitate a favore del servizio di Kinsta, ma la sua funzione di cancellazione della cache funziona con il nostro ambiente. È possibile utilizzare il plugin su ambienti di staging Kinsta senza che tali installazioni vengano conteggiate nel limite della licenza di WP Rocket.
2. W3 Total Cache
W3 Total Cache vi permette di minificare JavaScript, CSS e HTML con un controllo granulare. Inoltre, minifica il codice JavaScript o CSS in linea, incorporato o di terze parti. Oltre alla minificazione, rinvia anche JavaScript e CSS per un caricamento più veloce della pagina. Inoltre, il plugin offre molteplici opportunità di minificazione di JavaScript per i siti web WordPress.
3. WP-Optimize
WP-Optimize è un plugin di ottimizzazione per WordPress che offre uno strumento di minificazione avanzato che minifica CSS e JavaScript insieme alla pulizia della cache e all’ottimizzazione del vostro sito WordPress. Inoltre, vi permette di differire CSS e JavaScript. Come risultato, il sito carica le risorse non critiche dopo il caricamento della pagina principale, migliorando le prestazioni della pagina.
4. Autoptimize
Autoptimize è un plugin di minificazione per WordPress che aggrega, minimizza e mette nella cache CSS e JavaScript non aggregati per ridurre il tempo di caricamento della pagina e migliorare le prestazioni del vostro sito web. Può minificare e mettere in cache gli script, mettere inline il JavaScript critico e asincronizzare il JavaScript non aggregato.
Se state cercando un plugin di minificazione JavaScript per WordPress che si concentri principalmente sulle prestazioni del vostro sito web, Autoptimize è una scelta eccellente.
5. Fast Velocity Minify
Fast Velocity Minify offre una minificazione avanzata di JavaScript, CSS e HTML per gli utenti di WordPress. Esegue la minificazione sul frontend quando avviene la prima richiesta senza cache. Inoltre, il plugin ha un’interfaccia utente diretta e una usabilità semplice.
Riepilogo
Ottenere il massimo delle prestazioni dalla vostra pagina web richiede attenzione ai dettagli minori. Quindi, la minificazione di HTML, CSS e JavaScript entra nella lista delle cose da fare per le prestazioni del vostro sito web.
Abbiamo esplorato numerosi strumenti e plugin che possono assistervi nella minificazione di JavaScript. Tuttavia, ogni strumento o plugin menzionato serve allo stesso scopo e funziona in modo efficiente.
In base al vostro caso d’uso, selezionate uno strumento da questa lista e iniziate a minificare il vostro codice JavaScript per ottenere prestazioni più veloci per il vostro sito web.
Ci siamo persi qualche strumento di minificazione JavaScript o plugin di minificazione WordPress che vi piace? Fatecelo sapere nella sezione dei commenti!
Zadhid Powell è un Computer Engineer che ha messo da parte il coding per iniziare a scrivere! È anche un Digital Marketer, un appassionato di tecnologia, un esperto di SaaS, un lettore e un attento seguace delle tendenze del software. Spesso lo si può trovare in giro per i locali del centro con la sua chitarra o a ispezionare i fondali oceanici.
Lascia un commento