Softonic

Minificatore JavaScript

Passaggio 1 / 3
Avanti

Incolla JavaScript e ottieni una versione minificata che è dal 40 al 70% più piccola, spazi bianchi rimossi, variabili accorciate a lettere singole, rami morti eliminati, costanti piegate e (se lo abiliti) commenti rimossi. Utile per controlli rapidi delle dimensioni, embed una tantum e pagine di atterraggio dove non stai eseguendo un’intera catena di strumenti di build.

Come minificare JavaScript

  1. 1

    Incolla il sorgente

    Qualsiasi JavaScript valido ES5+. Per ES6 e oltre (template literals, classi, moduli), assicurati che il tuo target corrisponda.

  2. 2

    Scegli l'aggressività

    Sicuro (spazi bianchi + commenti), predefinito (+ rinominazione variabili), aggressivo (+ offusca proprietà, potrebbe rompere l'accesso al DOM).

  3. 3

    Minifica

    Lo strumento esegue una trasformazione compatibile con Terser e restituisce il risultato con conteggi di byte prima e dopo.

  4. 4

    Copia o scarica

    Incolla l'output in un tag `<script>` o salva come `.min.js` per servirlo dal tuo CDN.

Dove vanno i byte

Un file minificato tipico è dal 40 al 70% più piccolo rispetto al sorgente. Avvolgerlo in gzip (o Brotli, che Cloudflare e la maggior parte dei CDN usano) riduce ulteriormente del 60-75%. Combinato, un sorgente di 100 KB può essere spedito come ~15-25 KB attraverso la rete.

Sorgente Minificato +gzip +Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

Tecniche applicate

Tecnica Cosa fa
Rimozione spazi bianchi Rimuove spazi, tabulazioni, nuove righe
Rimozione commenti Elimina // e /* */ (a meno di !important)
Offuscamento variabili Rinomina userName -> u (sicuro per lo scope)
Offuscamento proprietà Rinomina obj.foo -> obj.a (NON SICURO)
Folding delle costanti 1 + 2 + 3 -> 6
Eliminazione codice morto Elimina rami dopo return
Inlining del controllo del flusso Inline funzioni piccole usate una volta
Compressione stringhe letterali Unisce costanti di stringa ripetute

Modalità sicura vs aggressiva

  • Sicura mantiene i nomi delle variabili, rimuove solo gli spazi bianchi. Buona per il debug dove vuoi tracce di stack leggibili.
  • Predefinito offusca le variabili locali ma mantiene i nomi globali e delle proprietà. Funziona con la maggior parte del codice.
  • Aggressiva offusca tutto, inclusi i nomi delle proprietà. Spesso rompe il codice che accede alle proprietà dinamicamente (obj["prop"], Object.keys(obj)) a meno che tu non configuri nomi riservati.

Quando minificare: e quando non farlo

  • Fai minificare in produzione, su ogni asset che il browser scarica.
  • Fai servire una mappa sorgente affinché gli strumenti di sviluppo del browser possano ancora mostrare i nomi originali durante il debug.
  • Non fare minificare in sviluppo, perdi tempo di build e perdi errori leggibili.
  • Non fare minificare codice già minificato. I file .min.js si riducono di ~1-3% durante la re-minificazione rischiando di rompere il codice.

Errori comuni

  • Non configurare nomi riservati. L’accesso dinamico alle proprietà (obj["payment_method"]) si rompe quando payment_method è offuscato in a.
  • Dimenticare le mappe sorgente. Senza file .map, gli errori in produzione sono illeggibili.
  • Minificare CommonJS ed ESM insieme. Sistemi di moduli misti necessitano di attenta tree-shaking prima della minificazione.

Domande frequenti

Tipicamente dal 40 al 70% più piccolo non compresso, riducendo ulteriormente del 60-75% quando compresso in gzip o Brotli. Un sorgente di 100 KB spesso viene spedito come ~15-25 KB attraverso la rete.

L’offuscamento predefinito (variabile locale) è quasi sempre sicuro. L’offuscamento aggressivo delle proprietà rompe qualsiasi codice che accede alle proprietà dinamicamente. Configura attentamente l’elenco riservato prima di abilitarlo.

Sì, attiva “genera mappa sorgente” e lo strumento restituisce il codice minificato più un file .map che mappa ogni byte al sorgente originale. Carica entrambi sul tuo CDN affinché gli strumenti di sviluppo possano mostrare tracce di stack leggibili.

Sì, await di livello superiore, campi di classe, metodi privati, coalescenza nullish, chaining opzionale e separatori numerici sono tutti supportati. Per proposte molto nuove (decoratori fase-3), controlla il flag specifico.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Creatore di diagrammi di flusso

Crea nel browser diagrammi di flusso visivi con cinque tipi di nodo, connessioni dirette e download SVG o PNG.

Promemoria Markdown

Riferimento pratico Markdown con anteprime reali ed esempi pronti da copiare per titoli, elenchi, tabelle, codice, link, immagini e sintassi GFM.

Strumento disponibile in altre lingue