Minificatore JS

Il Minificatore JS è uno strumento gratuito che rimuove i caratteri superflui da JavaScript e indica il numero di caratteri prima e dopo la minificazione.

A cosa serve la minificazione di JavaScript?

La minificazione di JavaScript riduce la quantità di codice sorgente che il browser deve scaricare. In genere elimina elementi di formattazione come rientri, interruzioni di riga e spazi nei punti in cui la sintassi di JavaScript non li richiede.

Uno script più piccolo può ridurre le dimensioni del trasferimento e il lavoro di analisi, soprattutto quando un sito distribuisce diversi bundle di grandi dimensioni. La compressione HTTP, per esempio Brotli o gzip, resta comunque importante, perché minificazione e compressione durante il trasferimento intervengono su aspetti diversi. La minificazione elimina caratteri dal sorgente, mentre la compressione codifica in modo più compatto i dati ripetuti durante il trasferimento.

Di solito, questa operazione viene eseguita durante una build precedente alla distribuzione. È utile anche per controllare uno script di terze parti non minificato, confrontare le dimensioni dei bundle o preparare un file autonomo per un sito privo di una pipeline di build.

La minificazione non garantisce che JavaScript funzioni correttamente. Uno script può essere minificato senza errori e contenere comunque chiamate API errate, variabili non accessibili o codice che genera problemi solo durante l'esecuzione.

Come si usa il Minificatore JS?

Incolla JavaScript nel campo JS e avvia lo strumento, quindi copia il valore restituito in JS minificato. Conserva il file sorgente originale nel sistema di controllo versione e distribuisci la copia compatta, senza sostituire il sorgente leggibile.

1. Per prima cosa, esegui sul codice sorgente un controllo della sintassi, un linter e i test automatici.
2. Incolla lo script completo in JS, includendo le eventuali importazioni di moduli o funzioni wrapper che fanno parte del file.
3. Controlla Caratteri JS e Caratteri JS minificati per verificare come è cambiato il numero di caratteri.
4. Verifica che il JavaScript minificato venga eseguito correttamente nello stesso browser e nello stesso contesto di distribuzione del file di produzione.
5. Se archivi insieme la versione minificata e quella leggibile, usa un nome file riconoscibile come app.min.js.

L'elaborazione avviene sul server. I dati inseriti vengono trasmessi al server tramite HTTPS e non vengono archiviati. Il server deve comunque ricevere JavaScript per elaborarlo, quindi non inviare codice sorgente che la tua organizzazione vieta di trasmettere a servizi esterni.

Cosa contiene il risultato minificato?

Il risultato contiene il JavaScript compatto e due conteggi. Caratteri JS indica la lunghezza dell'input, mentre Caratteri JS minificati indica la lunghezza del valore restituito in JS minificato.

I conteggi vengono calcolati con la funzione mb_strlen di PHP, che misura la lunghezza di una stringa multibyte invece di limitarsi a indicare il numero di byte. Il numero di caratteri, quindi, non corrisponde alle dimensioni finali del trasferimento di rete. I caratteri UTF-8 possono occupare più di un byte, mentre gzip o Brotli possono ridurre ulteriormente il file trasmesso.

Questo strumento non restituisce un campo separato per la convalida o la diagnostica. Non aspettarti che individui ogni parentesi mancante, espressione regolare non valida o funzionalità del linguaggio non supportata. In particolare, gli errori associati a JSON, come i nomi di proprietà senza virgolette o le virgole finali, non permettono di verificare JavaScript in modo affidabile, perché la sintassi degli oggetti letterali JavaScript è diversa da quella di JSON. Per i dati JSON, usa il Validatore e abbellitore JSON.

Piccoli esempi e input problematici

Ecco un semplice esempio di rimozione degli spazi.

Input

function add(a, b) { return a + b; }

Forma compatta

function add(a,b){return a+b;}

È possibile rimuovere anche la formattazione intorno a un oggetto senza modificarne i valori delle proprietà.

Input

const settings = { theme: "dark", retries: 2 };

Forma compatta

const settings={theme:"dark",retries:2};

La formattazione esatta può variare da un minificatore all'altro, soprattutto per quanto riguarda i punti e virgola facoltativi. Non è possibile compattare JavaScript in modo sicuro eliminando ogni spazio o interruzione di riga. Una minificazione sicura deve considerare il contesto lessicale e sintattico, così da distinguere la formattazione dai caratteri che influiscono sul programma.

• Spazi nelle stringhe: sono dati. Lo spazio in "Newcastle upon Tyne" deve rimanere.
• Punteggiatura: può avere una funzione sintattica. Rimuovere lo spazio da a + +b può produrre una sequenza di token diversa.
• Interruzioni di riga: a volte influiscono sull'inserimento automatico del punto e virgola, anche nel codice successivo a return, break o continue. Un'interruzione di riga subito dopo throw non è consentita, perché la relativa espressione deve iniziare sulla stessa riga.
• Caratteri accentati e non latini: possono comparire nelle stringhe e, quando le regole degli identificatori JavaScript lo consentono, negli identificatori. Le loro dimensioni in byte possono essere diverse dal numero di caratteri.
• Numeri: sono token del codice sorgente, non istruzioni per il conteggio dei caratteri. Un minificatore deve conservarne il valore numerico anche quando sceglie una notazione equivalente più breve.

Quando non conviene minificare JavaScript?

In genere non conviene ripetere la minificazione di un file già minificato. Un secondo passaggio potrebbe ridurne poco o per nulla le dimensioni, rendendo al contempo più difficile risalire all'output della build e rischiando di interferire con le mappe sorgente esistenti.

Ha poco senso anche riformattare e poi minificare JavaScript destinato alla sola lettura da parte di una macchina. Conserva un sorgente leggibile per la manutenzione e usalo per generare gli artefatti da distribuire. Per un'applicazione consolidata, uno strumento di build come esbuild, Rollup o webpack è generalmente più adatto, perché può automatizzare il raggruppamento dei moduli e la generazione delle mappe sorgente. La minificazione può essere integrata oppure aggiunta tramite la configurazione o un plugin, mentre Terser è un minificatore dedicato.

Non considerare la minificazione una forma di offuscamento o di controllo degli accessi. I nomi di funzioni e variabili possono restare visibili, le stringhe letterali sono comunque leggibili e gli strumenti per sviluppatori del browser possono riformattare il codice compatto. Segreti, chiavi private e credenziali con privilegi non devono mai essere incorporati in JavaScript eseguito sul client.

Se stai preparando tutte le risorse statiche di una pagina, il Minificatore CSS e il Minificatore HTML possono applicare la stessa operazione ai rispettivi formati. Usa uno strumento distinto per ogni formato, perché cambiano sia le regole di analisi sia quelle relative agli spazi.

Domande frequenti

Lo strumento genera una mappa sorgente?

No, non viene restituito alcun campo per la mappa sorgente. Se vuoi ricondurre le tracce dello stack in produzione ai file originali, genera lo script minificato e il relativo file .map durante la stessa procedura di build. Distribuire una mappa sorgente proveniente da una build diversa può produrre riferimenti fuorvianti a righe e colonne.

La minificazione impedisce ad altri di copiare il mio JavaScript?

No. I browser devono ricevere codice eseguibile sul client, quindi un visitatore può scaricarlo ed esaminarlo. La minificazione rende il sorgente meno leggibile, ma non offre riservatezza, non impone il rispetto delle licenze e non protegge in modo significativo i segreti incorporati.

Posso incollare codice che contiene chiavi API?

Non incollare chiavi API segrete, token o credenziali private. L'input viene trasmesso tramite HTTPS e non viene archiviato, ma l'elaborazione avviene sul server. Le chiavi pubbliche per browser, distribuite intenzionalmente a ogni visitatore, devono comunque essere soggette a restrizioni per dominio, origine, quota o autorizzazioni, quando il servizio interessato le supporta.

Un numero di caratteri inferiore rende sempre più veloce il caricamento della pagina?

No. L'effetto dipende dalle dimensioni del file originale, dalla cache, dalle condizioni della connessione, dalla compressione del server e dalla quantità di JavaScript che il browser deve analizzare ed eseguire. Oltre al totale dei caratteri, controlla le dimensioni compresse del trasferimento e il comportamento durante l'esecuzione.

Devo mantenere l'estensione .js dopo la minificazione?

Sì. JavaScript minificato mantiene normalmente l'estensione .js, mentre .min.js viene usata per convenzione quando sono presenti entrambe le versioni. Prima della distribuzione, verifica che il server invii un tipo di contenuto adatto a JavaScript e che il codice HTML o l'importazione del modulo faccia riferimento al file corretto.