Minificatore JavaScript
File più piccoli, stesso comportamento

Cos’è un minificatore JavaScript?

Un minificatore JavaScript prende un file scritto per essere letto dalle persone e lo riscrive perché lo scarichi un browser. I commenti vengono eliminati. L’indentazione se ne va. I nomi lunghi e descrittivi diventano brevi. Tuttavia il codice fa esattamente ciò che faceva prima, perché nulla di tutto questo cambia il significato del programma.

Il risparmio è reale. Uno script leggibile è fatto soprattutto di spazi e nomi, ed entrambi sono byte che i visitatori pagano a ogni visita. Perciò un file che scende da 40 KB a 18 KB arriva prima su un telefono, su una connessione lenta e dall’altra parte del mondo.

Questo analizza il codice invece di tirare a indovinare. Costruisce un albero sintattico, rinomina ciò che è sicuro rinominare, elimina ciò che nulla può raggiungere, calcola in anticipo l’aritmetica possibile e poi rilegge la propria risposta per verificarla. Le sezioni seguenti spiegano ogni passaggio, anche dove si ferma di proposito.

Un minificatore vive o muore in base a dove finiscono davvero le istruzioni. Il riferimento MDN sulla grammatica lessicale di JavaScript ne è il regolamento.

Quando minificare JavaScript

Minifica alla fine, mai all’inizio. Vuoi il file leggibile nell’editor e quello piccolo sul server. Quindi conserva l’originale, pubblica l’output e non modificare mai a mano la copia minificata.

Conta soprattutto per gli script che ogni pagina carica. Per esempio, un bundle condiviso che ogni visitatore scarica merita più attenzione di uno script su una pagina che nessuno apre.

Cosa non farà questo minificatore JS

Non rinominerà nulla che non possa dimostrare sicuro. Se il file contiene un blocco `with` o una chiamata diretta a eval, un nome può essere cercato come stringa durante l’esecuzione, e nessun parser può seguirlo. In quei file la rinomina si disattiva per l’intero file e lo strumento ti dice perché, invece di pubblicare una rinomina che si rompe in produzione.

Non rinominerà i nomi di primo livello, a meno che tu non spunti la casella. Il codice incollato di solito è uno script classico, dove una funzione di primo livello diventa una proprietà di window che un altro file può chiamare per nome. Invece dentro un modulo o una IIFE nulla dall’esterno può raggiungere quei nomi, quindi lì l’opzione regala byte.

Non toccherà globali o API del browser. window, document e console non sono tuoi da rinominare, quindi restano esattamente come scritti, insieme a tutto ciò che è importato, esportato o mai dichiarato nel file che gli hai dato.

Due parole sulle source map

Questo strumento non scrive ancora source map, quindi uno stack trace da output rinominato indicherà le funzioni con i nomi brevi. Se ti servono trace leggibili più degli ultimi byte, disattiva la rinomina; gli altri passaggi continuano a funzionare e conservi i nomi originali.