Formattatore e minificatore JavaScript

Come formattare o minificare JavaScript

1. Incolla il tuo codice, oppure clicca su Apri un file per caricare un file .js, .mjs o .jsx (fino a 10 MB).
2. Scegli l’Indentazione e, se preferisci lo stile Allman, spunta Parentesi graffe su una riga a sé.
3. Clicca su Formatta (beautify) per rendere il codice leggibile.
4. Per ridurlo, imposta le Opzioni di minificazione e clicca su Minifica. Per cercare solo gli errori, clicca su Controlla la sintassi.
5. Copia o scarica il risultato. La riga di stato mostra la dimensione prima e dopo e la percentuale risparmiata.

Il codice viene solo letto e trasformato, mai eseguito: nulla di ciò che incolli viene eseguito in questa pagina.

Formattare con js-beautify

Formatta (beautify) usa js-beautify. Mette un’istruzione per riga, indenta i blocchi, aggiunge spazi attorno agli operatori e dopo le parole chiave, e conserva al massimo una riga vuota dove ne avevi. Capisce anche la sintassi moderna (classi, arrow function, template literal, async/await) e JSX. È il modo più rapido per leggere una libreria minificata o un frammento su una sola riga copiato da una pagina web.

La formattazione cambia solo gli spazi. Non controlla che il codice sia valido: una parentesi mancante produce semplicemente un’indentazione strana. Per questo usa Controlla la sintassi.

Minificare con Terser

Minifica usa Terser, il minificatore impiegato dalla maggior parte degli strumenti di build JavaScript. Visto che è grande, viene scaricato solo la prima volta che clicchi su Minifica o Controlla la sintassi. Le opzioni corrispondono direttamente alle impostazioni di Terser:

• ES module (import/export) analizza il codice come modulo (module: true): si applica la strict mode e i nomi di primo livello sono privati, quindi possono essere rinominati e quelli inutilizzati rimossi. Lascialo deselezionato per uno script classico le cui funzioni globali vengono usate da altri script.
• Comprimi (compress) riscrive il codice in un codice equivalente più corto: calcolo delle costanti (2*60 diventa 120), rimozione del codice morto, unione delle dichiarazioni var, condizioni più brevi.
• Accorcia i nomi delle variabili (mangle) rinomina variabili locali e parametri con una o due lettere. I nomi globali e le proprietà degli oggetti non vengono mai rinominati.
• Mantieni i commenti di licenza conserva i commenti che iniziano con /*! o che contengono @license o @preserve. Tutti gli altri commenti vengono rimossi.

La minificazione non può cambiare ciò che fa il codice, ma il codice che dipende dai nomi delle funzioni (fn.name) o da eval può comportarsi diversamente dopo la rinomina. In quel caso togli la spunta da Accorcia i nomi delle variabili.

Errori di sintassi con riga e colonna

Quando Terser non riesce ad analizzare il codice, Minifica e Controlla la sintassi mostrano il messaggio di errore con la sua riga e colonna, per esempio “Riga 12, colonna 8 – Errore di sintassi: Unexpected token punc «)»”. Il messaggio di Terser resta in inglese. La colonna conta i caratteri a partire da 1. Una causa tipica è una parentesi mancante più indietro nel file, quindi guarda anche le righe subito prima della posizione indicata.