Vai al contenuto
🛠️
Whiz Tools

Minimizzatore JavaScript - Ottimizzatore di Codice JS Online Gratuito

Strumento gratuito per minimizzare JavaScript che riduce la dimensione del codice rimuovendo spazi bianchi e commenti. Ottimizza istantaneamente file JS senza necessità di installazione.

Minimizzatore JavaScript

Informazioni su questo strumento

Questo semplice minimizzatore JavaScript rimuove gli spazi vuoti e i commenti non necessari per ridurre la dimensione del codice. Preserva la funzionalità rendendo il codice più compatto.

  • Rimuove gli spazi vuoti non necessari (spazi, tabulazioni, nuove righe)
  • Rimuove i commenti (sia a riga singola che su più righe)
  • Preserva i valori letterali delle stringhe e le espressioni regolari
  • Mantiene la funzionalità del codice
Calcolatore di caricamento...
📚

Documentazione

Che cos'è un minificatore JavaScript?

Un minificatore JavaScript è uno strumento che riduce il codice sorgente JavaScript rimuovendo i caratteri di cui un browser non ha bisogno per eseguirlo, come spazi superflui, interruzioni di riga e commenti. Dopo la minificazione, il codice fa esattamente la stessa cosa. Cambia solo la dimensione del file.

I file JavaScript più piccoli vengono scaricati e caricati più rapidamente, quindi la minificazione è un passaggio comune prima della pubblicazione di un sito web.

Come funziona la minificazione JavaScript

Questo strumento legge il codice un carattere alla volta e lo ricostruisce, eliminando tutto ciò che serve ai lettori ma non al motore JavaScript. Rimuove:

  • Commenti, sia i commenti // single-line sia i commenti /* multi-line */, compresi i commenti in stile JSDoc.
  • Spazi superflui, tabulazioni e righe vuote che esistono solo per rendere il codice più facile da leggere.

Non aggiunge né rimuove altro. Non elimina mai un punto e virgola, una parentesi o qualsiasi altro carattere già presente nel codice e non inserisce mai nuova punteggiatura. Lascia inoltre inalterati diversi elementi:

  • Il testo all'interno delle stringhe ("like this", 'like this') e dei literal di template (`like this`), anche se quel testo contiene spazi o sembra un commento.
  • I literal di espressioni regolari, come /[a-z]+/g, insieme a tutti i relativi flag: d, g, i, m, s, u, v e y.
  • Ogni punto e virgola, virgola e parentesi quadra già presente nel codice originale.

A volte non è possibile rimuovere uno spazio tra due token senza modificarne il significato. return a non può diventare returna, perché verrebbe letto come un'unica parola. Lo stesso vale per i nomi scritti con lettere al di fuori dell'alfabeto inglese, quindi typeof π conserva il proprio spazio. Quando la rimozione di uno spazio unirebbe due token, lo strumento mantiene invece un singolo spazio.

Anche un'interruzione di riga può essere importante. JavaScript inserisce a volte automaticamente un punto e virgola alla fine di una riga, secondo una regola chiamata inserimento automatico del punto e virgola. Se l'eliminazione di un'interruzione di riga potesse attivare o impedire questa regola, oppure se l'interruzione seguisse una parentesi graffa di chiusura }, lo strumento mantiene in quel punto una singola nuova riga. Per questo il codice minificato non è sempre compresso su una sola riga: alcune interruzioni di riga cambiano il significato del codice e devono rimanere.

Come usare questo minificatore JavaScript

  1. Incollare il codice JavaScript nella casella di input.
  2. Selezionare «Minify».
  3. Leggere il risultato nella casella di output, insieme alla dimensione originale, alla dimensione minificata e alla riduzione percentuale.
  4. Selezionare «Copy» per copiare il codice minificato.

La minificazione viene eseguita nella scheda del browser, quindi il codice non viene caricato su alcun server per essere elaborato. Lo strumento copia inoltre il codice incollato nell'indirizzo della pagina, rendendo facile aggiungere un risultato ai segnalibri o condividerlo. Chiunque possa vedere quell'indirizzo può quindi vedere il codice.

Esempio: minificazione di una funzione

Prima:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Dopo:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Tutti e tre i commenti scompaiono e l'indentazione viene eliminata. Il punto e virgola dopo a+b rimane, perché lo strumento non elimina mai un punto e virgola già presente. Rimane anche l'interruzione di riga prima di const, perché segue una } di chiusura.

Esempio: minificazione di una classe

Prima:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Dopo:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Si noti che rimane un'interruzione di riga prima di ogni metodo e prima della } di chiusura della classe. Nel codice originale, ciascuna di queste interruzioni segue una } di chiusura, quindi la regola che protegge l'inserimento automatico del punto e virgola le conserva. Rimangono anche i punti e virgola all'interno di ogni metodo.

Formula della riduzione delle dimensioni

Lo strumento mostra tre numeri sotto la casella di output: la dimensione originale, la dimensione minificata e la riduzione. Tutte le dimensioni sono conteggi di caratteri, non di byte. La riduzione è una percentuale arrotondata al numero intero più vicino:

1reduction = round((1 - minified characters / original characters) x 100)
2

L'esempio della funzione qui sopra contiene 213 caratteri prima della minificazione e 103 dopo. Quindi 1–103 / 213 = 0,5164, cioè 51,64%, e lo strumento mostra 52%. L'esempio della classe passa da 515 caratteri a 304, pari a 40,97%, mostrato come 41%.

Limiti di questo minificatore

Questo strumento rimuove solo commenti e spazi bianchi. A differenza degli strumenti della fase di compilazione, come Terser o UglifyJS, non rinomina le variabili, non elimina il codice inutilizzato e non combina i file. Questi strumenti producono di solito un output più piccolo, ma richiedono un processo di compilazione per essere eseguiti. Questo strumento funziona istantaneamente nel browser senza configurazione, quindi è adatto a controlli rapidi o piccoli frammenti di codice, non a un'intera pipeline di produzione.

Domande frequenti

Che cosa rimuove un minificatore JavaScript?

Rimuove i commenti e gli spazi bianchi non necessari per eseguire il codice. Non rimuove punti e virgola, parentesi quadre o qualsiasi altro carattere già presente nel codice.

La minificazione JavaScript cambia il modo in cui viene eseguito?

No. Il codice minificato dovrebbe produrre gli stessi risultati dell'originale. Cambia solo la formattazione.

Perché il codice minificato a volte contiene ancora interruzioni di riga?

Un'interruzione di riga può essere richiesta dalla regola di inserimento automatico del punto e virgola di JavaScript, oppure può seguire una parentesi graffa di chiusura }. Rimuoverla potrebbe cambiare il comportamento del codice, quindi lo strumento mantiene in quei punti una singola nuova riga invece di eliminarla.

La minificazione è la stessa cosa della compressione?

No. La minificazione rimuove caratteri dal codice sorgente stesso. La compressione, come gzip o Brotli, codifica il file in modo diverso per il trasferimento su una rete. I siti web usano comunemente entrambe.

Il mio codice viene inviato a un server?

Il minificatore viene eseguito interamente nella scheda del browser e il codice non viene caricato per essere minificato. Il codice incollato viene memorizzato nell'indirizzo della pagina, così il risultato può essere condiviso o aggiunto ai segnalibri; perciò appare nella barra degli indirizzi del browser e nella relativa cronologia.

È possibile riportare il codice minificato all'originale?

Gli spazi bianchi possono essere ripristinati da un formattatore di codice, ma i commenti e i nomi originali delle variabili e delle funzioni sono scomparsi, a meno che non sia stata salvata una mappa sorgente separata.

Riferimenti

  1. MDN Web Docs. "Minification." Glossario MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," sezione 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," sezione 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," sezione 22.2.6, "Properties of the RegExp Prototype Object" (l'insieme di flag d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object