Minificatore e formattatore JavaScript

Che cos'è questo strumento?

Un minificatore JavaScript riscrive il codice in modo da renderlo il più compatto possibile, pur mantenendone inalterato il funzionamento: accorcia i nomi delle variabili e delle funzioni laddove è sicuro farlo, rimuove i commenti e gli spazi bianchi, raggruppa le costanti ed elimina il codice irraggiungibile.

Questo strumento è basato su Terser, il minificatore basato su AST utilizzato da webpack, Vite, Rollup e dalla maggior parte dei moderni strumenti di compilazione JavaScript. Poiché analizza effettivamente il codice anziché limitarsi a cercare corrispondenze con modelli prestabiliti, distingue correttamente un operatore di divisione da un letterale regex, non compromette le stringhe dei template che contengono sequenze simili a // e non rinomina una variabile con un nome che entra in conflitto con qualcosa in un ambito esterno.

Perché usarlo?

• Minificazione basata su AST (Terser), lo stesso motore utilizzato dai principali strumenti di bundling — sicura con letterali regex, stringhe di template e chiusure.
• Modifica i nomi delle variabili per ottenere un risparmio effettivo di spazio, non solo la rimozione degli spazi bianchi.
• Scopri esattamente quanti byte e quale percentuale hai risparmiato.
• La modalità "Formato" trasforma il codice JS minificato, oscurato e su un'unica riga in codice leggibile e indentato — utile per comprendere gli script di terze parti.
• Elaborazione al 100% locale — il codice proprietario non esce mai dal tuo browser.

Come si usa

1. Inserisci il tuo codice JavaScript nella casella di immissione oppure fai clic su "Carica esempio" per provare un esempio con un'espressione regolare letterale e una stringa modello.
2. Clicca su "Minify" per comprimerlo, oppure su "Format" per formattarlo con un'indentazione di 2 spazi.
3. Controlla il messaggio che appare sotto le caselle: la modalità "minify" mostra la riduzione delle dimensioni; un errore di sintassi nel tuo codice genera un messaggio chiaro invece di produrre silenziosamente un output errato.
4. Clicca su "Copia" per salvare il risultato.

Esempio

Input

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Risultato

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

I nomi delle variabili vengono abbreviati, il commento e l'istruzione if vengono raggruppati in un'unica espressione, ma l'espressione regolare letterale e la stringa del template vengono mantenute esattamente come sono e il comportamento rimane invariato.

Consigli pratici

• Minimizzare in fase di compilazione, non modificando manualmente il codice: mantenere il codice sorgente leggibile sotto controllo di versione e generare il bundle minimizzato come fase della compilazione.
• Se il codice minimizzato si comporta in modo imprevisto, verifica se il codice fa uso di `Function.prototype.name` o della riflessione: il processo di mangling rinomina le funzioni e ciò può causare problemi in rari casi limite.
• Formattare uno script di terze parti prima di leggerlo è molto più veloce che cercare di analizzare una singola riga di 2.000 caratteri.
• Se stai preparando un bundle statico completo per la distribuzione, utilizzalo insieme ai minificatori HTML e CSS riportati di seguito.

Come si inserisce tutto questo nei flussi di lavoro reali

JavaScript è solitamente la risorsa più pesante che blocca il rendering o l’analisi sintattica in una pagina, quindi la sua minificazione ha un effetto reale e misurabile sui tempi di caricamento — maggiore rispetto all’HTML o ai CSS, byte per byte. La maggior parte dei framework moderni esegue questa operazione automaticamente in fase di compilazione, ma gli script scritti a mano, le estensioni del browser e i bookmarklet vengono spesso distribuiti senza essere stati minificati, a meno che qualcuno non li elabori con uno strumento come questo.

L'opzione "Format" viene solitamente utilizzata in senso inverso: individuare l'origine di un errore in produzione a partire da una traccia di stack minificata risulta molto più semplice una volta che il codice circostante è stato riformattato e reso leggibile, anche in assenza dei nomi originali delle variabili.

→ Minificatore HTML · Minificatore CSS

Casi d'uso comuni

• Comprimere uno script autonomo o un bookmarklet prima di pubblicarlo.
• Riformattare uno script minificato estratto da un sito attivo per capirne il funzionamento.
• Pulire il codice JavaScript incollato da un post su un forum o da uno snippet generato dall'intelligenza artificiale prima di leggerlo attentamente.
• Verificare rapidamente se uno snippet di codice JavaScript scritto a mano presenta un errore di sintassi, poiché un errore di analisi viene segnalato con un messaggio esplicito.

Domande frequenti