Minimizzare i Javascript

minimizzare javascript come fare immagine

Argomenti

 

  1. Cos’è la minimizzazione JavaScript?
  2. Differenza tra minimizzazione e altre pratiche
  3. Perché non scrivere codice minimizzato da subito?
  4. Svantaggi della minimizzazione javascript
  5. Migliori strumenti di minimizzazione JavaScript
  6. Plugin per Minimizzare Java script
  7. Conclusioni

 

Cos’è la minimizzazione JavaScript?

La minimizzazione, nota anche come minificazione, è il processo di rimozione di tutti i caratteri non necessari dal codice sorgente JavaScript senza alterarne la funzionalità. Ciò include la rimozione di spazi bianchi, commenti e punti e virgola, insieme all’uso di nomi di variabili e funzioni più brevi. La minimizzazione del codice JavaScript si traduce in dimensioni di file compatte.

minimizzare javascript Illustrazione che mostra una scienziata che somiglia a whoopy Goldberg comprimere i javascript in un ampolla

Ad esempio, ecco un blocco di codice prima e dopo la minimizzazione:

Prima della minimizzazione: otto righe di codice

1// Questa funzione prende name come parametro
2// e registra una stringa che saluta quel nome(name)
3// usandol'informazione passata
4 function diCiao(name) {
5 console.log("Ciao" + name + ", piacere.")
6}
7
8 diCiao("Marco");

Dopo la minimizzazione: una singola riga di codice

1 function diCiao(o) {console.log ("Ciao"+o+", piacere.") }diCiao("Marco");

La minimizzazione accelera il caricamento della pagina Web, migliorando così l’esperienza del sito Web, rendendo felici sia i visitatori che i motori di ricerca.

In che modo la minimizzazione è diversa dall’offuscamento, dalla compressione, dalla crittografia o dalla brutalizzazione?

Brutalizzazione: essenzialmente equivale alla minimizzazione. Uglify JS è una libreria JavaScript per minimizzare i file JavaScript. Per “rendere Bruto” un file JavaScript significa minimizzarlo utilizzando Uglify. L’uglificazione migliora le prestazioni riducendo la leggibilità.

Crittografia: questo è il processo di traduzione dei dati, chiamati dati semplici, in dati codificati. Questi dati crittografati o codificati sono noti come testo cifrato e necessitano di una chiave segreta per decriptarli. Il browser non può eseguire codice crittografato. La crittografia è una funzionalità di sicurezza e non riduce necessariamente la dimensione di un file.

Offuscamento: questo processo viene utilizzato per nascondere la logica aziendale. Il codice viene modificato in modo tale da diventare illeggibile dagli esseri umani. Ciò rende difficile il reverse engineering. L’offuscamento è diverso dalla crittografia in quanto i computer sono ancora in grado di comprendere ed eseguire il codice. L’offuscamento si ottiene modificando i nomi di variabili, funzioni e membri. La conseguente riduzione delle dimensioni del file migliora anche le prestazioni, sebbene questo non sia l’obiettivo principale dell’offuscamento.

Compressione: la compressione dei dati è un processo che riduce il numero di bit necessari per rappresentare i dati. La compressione dei dati può liberare spazio prezioso sui dischi rigidi, accelerare il trasferimento dei file e ridurre i costi di la larghezza di banda della rete. Alcuni file, come i file di Microsoft Word, potrebbero essere compressi al 90% della dimensione originale.

Perché gli sviluppatori non scrivono codice minimizzato da subito?

La minimizzazione produce file compatti, il che la rende una best practice per le prestazioni web. Quindi, perché non scrivere codice già minimizzato?

Il codice JavaScript è scritto per e da utenti umani, che necessitano di spazi bianchi, formattazione e commenti per poter comprendere ed eseguire il debug del codice. Dopo che il codice è stato scritto, è possibile utilizzare un software di minimizzazione per migliorare le prestazioni. Questo perché i browser possono eseguire codice senza doverlo comprendere.

Quali sono gli svantaggi della minimizzazione javascript?

La minimizzazione può interrompere script complicati a causa di variabili dipendenti dal sito come ad esempio  temi WordPress, plug-in e ambiente server. Inoltre, la minimizzazione deve essere eseguita insieme ad altre ottimizzazioni delle prestazioni. Di per sé, potrebbe non fornire guadagni significativi. La minimizzazione può anche introdurre errori difficili da eseguire il debug.

Nonostante questi svantaggi, di solito vale la pena tentare la minimizzazione per potenziali miglioramenti delle prestazioni. Scopri anche come minimizzare i CSS.

 

I 10 migliori strumenti di minimizzazione JavaScript

1) JS min

JS Min è uno strumento basato sul Web per ridurre il codice JavaScript per renderlo il più leggero possibile. Funziona rimuovendo in modo efficiente eventuali commenti e spazi bianchi non necessari dai file JavaScript. La dimensione del file si ridurrà gradualmente fino a circa il 50%, aprendo la strada a download rapidi. Ottieni anche un improvviso aumento di uno stile di programmazione più comunicativo poiché rimuove il prezzo di download di nuovi documenti letterari.

2) YUI Compressor

Il compressore YUI è noto per essere uno strumento da riga di comando super veloce stampato in Java e ampliato da Yahoo. Può aiutarti minimizzando i tuoi file JavaScript in modo sicuro e protetto con un rapporto di compressione elevato e impressionante. Ha anche funzionalità per comprimere i file CSS se stai cercando una soluzione tutto in uno; puoi farlo utilizzando un port del minificatore CSS basato su espressioni regolari di Isaac Schlueter.

3) Dean Edwards Packer Javascript

Packer è un noto strumento di minimizzazione JavaScript che crea manualmente una versione compattata del tuo codice. Semplice da usare, tutto ciò che lo sviluppatore deve fare è incollare JavaScript e fare clic sul pulsante Pack per generare il codice.

4) Google Closure Compiler

Potresti anche utilizzare Google Compiler come strumento di minimizzazione per formulare JavaScript da scaricare ed eseguire in modo incredibilmente veloce. Ulteriori vantaggi derivanti dall’utilizzo di questo strumento sono la verifica della sintassi e i suggerimenti modificabili, nonché la notifica degli inconvenienti di JavaScript. È un vero compilatore da JavaScript verso un JavaScript superiore. Questo strumento raccoglie il tuo JavaScript, lo valuta, elimina il codice ridondante e lo riscrive.

5) Dojo ShrinkSafe

Poiché Dojo non modificherà una variabile pubblica, ciò significa che lo sviluppatore può immergersi nella versione compattata di JavaScript nelle pagine senza nemmeno modificare il codice che la applica. Il Dojo ShrinkSafe risolve JavaScript e sgranocchia ulteriormente i nomi delle variabili locali con l’uso della libreria rhino. La dimensione dei tuoi script può essere ridotta, basandosi così sullo stile del tuo programma.

6) JS Compress

JS Compress minimizza facilmente i tuoi file JavaScript riducendo le dimensioni del file di quasi il 30%-90%. Inoltre, rimuove gli spazi bianchi e i commenti. Migliora le prestazioni complessive degli script, accelerando i tempi di download per i tuoi utenti e riducendo l’utilizzo della larghezza di banda del tuo sito web.

7) Ajax minify

AjaxminUi riduce al minimo i singoli file JavaScript nelle cartelle nidificate. Puoi caricare il minificatore in background, analizzare la produttività del minificatore e aprire la cartella produttiva quando il minificatore ha finito.

8) JavaScript Minifier

Javascript Minifier può minimizzare le tue fonti CSS e persino ridurre i dati spostati tra il server e il client. JavaScript Minifier può apportare alcuni buoni miglioramenti delle prestazioni come l’ottimizzazione della cache; combinando file JavaScript minimizzandoli; e fornire file CSS.

9) Strumento di sovraccarico digitale

Lo strumento Digital Overload è un minimizzatore JavaScript che può minimizzare senza problemi i tuoi file JavaScript. Questo minificatore può anche fornire soluzioni uniche, tattiche e ben preparate.

10) Gulp

Il plugin gulp-minify minimizza i file JS rendendoli più leggeri. Gulp è un task runner Node ed è un sistema di build in streaming nello sviluppo web front-end. Aiuta ad automatizzare attività come la copia di file, la minimizzazione del codice JavaScript o la compilazione di TypeScript in JavaScript.

Ognuno di questi strumenti ha la propria unicità nel rendere più semplice la minimizzazione. Ciò che è veramente importante è trovare quello che funziona per te e per il tuo sito web.

Plugin per Mimimizzare Java script

 

Tre plugin di minimizzazione di WordPress a confronto

Se desideri minimizzare il codice del tuo sito web, ci sono molti plugin che possono aiutarti. Come accennato all’inizio di questo articolo, il modo migliore per sapere quanto sono efficienti questi plugin è testarli. A tal fine, abbiamo creato un sito Web WordPress di prova che esegue quattro plugin relativamente complessi:

  • WooCommerce,
  • Yoast SEO,
  • Smush Image Compression and Optimization
  • Loginizer.

Prima di minimizzare uno qualsiasi dei suoi script, la home page del nostro sito di prova aveva una dimensione di 394,02 KB e ci sono voluti 0,78 secondi per caricarsi (secondo WebPagetest):

I risultati dei nostri test iniziali prima di utilizzare i plugin di minimizzazione di WordPress
Nelle prossime sezioni proveremo alcuni dei migliori plugin di minimizzazione di WordPress e condivideremo i nostri risultati con voi. Tra un test e l’altro, ripristineremo il nostro sito Web al suo stato iniziale da un backup per maggiore precisione. Naturalmente, tieni presente che i tuoi risultati possono variare e che i siti più grandi probabilmente vedranno miglioramenti più imponenti.

1. Autoptimize (gratuito)

Autore: Frank Goossens (futtta) | Versione corrente: 3.1.10 | Ultimo aggiornamento: 8 gennaio 2024 | Giudizi 4,7 | Installazioni 1.000.000+

Test del plugin Autoptimize

Usare questo particolare plugin è straordinariamente semplice. Basta installarlo e attivarlo, quindi andare alla scheda Impostazioni → Ottimizzazione automatica sulla Bacheca. All’interno troverai le opzioni per ottimizzare HTML, JavaScript e CSS:

Per questo test, abbiamo abilitato tutte e tre le opzioni e salvato le modifiche. Quindi, abbiamo controllato i nostri tempi di caricamento:

Risultati del test di Autooptimize.
Utilizzando questo plugin, abbiamo ridotto le dimensioni della nostra home page a 337,8 KB e il nostro tempo di caricamento è diminuito di conseguenza a 0,82 secondi. Questa è una differenza piccola ma comunque evidente.

2. Fast Velocity Minify (gratuito)

Autore: Raúl Peixoto | Versione corrente: 3.4.1 | Ultimo aggiornamento: 19 ottobre 2023 | Giudizi 4.6 | Installazioni 60000+

Fast Velocity Minify combina i tuoi file CSS e JavaScript, quindi i tuoi server devono gestire meno richieste. Allo stesso tempo, li minimizza e crea copie memorizzate nella cache per tempi di caricamento più rapidi.

Test del plugin Fast Velocity Minify

A differenza della nostra precedente azione, questo plugin abilita automaticamente le opzioni per minimizzare HTML, JavaScript e CSS. Tuttavia, puoi disabilitarne uno o più manualmente accedendo alla scheda Impostazioni → Fast Velocity Minify.

Inoltre, se lo desideri, puoi escludere file specifici dalla minimizzazione.

Per quanto riguarda le prestazioni, ecco i nostri risultati dopo aver attivato questo plugin e minimizzato tutti i file possibili:

Le dimensioni della nostra home page sono scese da 394.02 a 333,5 KB e si sono caricate in soli 0,75 secondi. Questo è leggermente migliore dei risultati di Autoptimize, anche se in definitiva comparabili.

3. Merge + Minify + Refresh (Gratuito)

Autore/i: Launch Interactive | Versione corrente: 2.7 | Ultimo aggiornamento: 11 dicembre 2023  | Giudizi 4.2 / | Installazioni 7.000+

Come puoi immaginare dal nome, Unisci + Minimizza + Aggiorna fa la sua magia combinando i tuoi file CSS e JavaScript e minimizzandoli. Inoltre, li memorizza nella cache in modo che il tuo server non debba ripetere l’intero processo di caricamento ogni volta che vengono richiesti e aggiorna automaticamente tutto quando apporti modifiche a tali file.

Test del plugin Merge + Minify + Refresh

Proprio come la nostra scelta precedente, questo plugin abilita automaticamente la minimizzazione per JavaScript e CSS. Tuttavia, non include un’opzione per ottimizzare il tuo HTML.

Ci sono anche meno opzioni di personalizzazione qui rispetto a Fast Velocity Minify, ma comunque più di quanto offre Autoptimize. Ad esempio, puoi escludere file dal processo di minimizzazione e persino abilitare la codifica Gzip per risultati migliori:

Unisci più Minimizza più Aggiorna le impostazioni.
Dopo aver attivato questo plugin, abbiamo testato ancora una volta i tempi di caricamento della nostra home page:

I risultati di Merge + Minify + Refresh  i risultati 0,818

La dimensione del nostro file è scesa a 338,43 KB e la pagina è stata caricata in 0,818 secondi. Nel complesso, si tratta di un miglioramento minore nelle dimensioni complessive rispetto a quello riscontrato con i due plugin precedenti, ma è simile ad Autoptimize per quanto riguarda le prestazioni.

Una sintesi dei nostri risultati

Nel complesso, i risultati che abbiamo riscontrato durante i nostri test erano in linea con le nostre aspettative. Ogni plugin ha fornito un piccolo aumento delle prestazioni, ma niente di straordinario:

Autoptimize Fast Velocity Minify Merge + Minify + Refresh
Dimensioni della pagina originale (in KB) 394,02 394,02 394,02
Tempo di caricamento originale (in secondi) 0,87 0,87 0,87
Dimensioni pagina post-minificazione (in KB) 337,8 333,5 338,43
Tempo di caricamento post-minificazione 0,82 0,75 0,818
Ulteriori impostazioni disponibili No Si Si

Il plugin migliore, in questo caso, si è rivelato essere Fast Velocity Minify. Non solo ha ottenuto i migliori risultati, ma offre anche molte più impostazioni rispetto ai suoi concorrenti, il che lo rende ideale per gli utenti esperti.

D’altra parte, se stai cercando un plugin facile da usare, puoi usare Autoptimize. I suoi risultati sono stati buoni quasi quanto quelli di Fast Velocity Minify e richiede solo di abilitare alcune impostazioni per iniziare. Infine, Merge + Minify + Refresh non è stata una delusione in termini di risultati, ma potrebbe trarre vantaggio dall’inclusione di più opzioni. Nel complesso, è un punto mediano di buona qualità  tra gli altri due plugin.