Sobre aquesta eina
La minificació de JavaScript redueix la mida del codi font eliminant caràcters innecessaris i (amb els minificadors adequats) canviant el nom de les variables locals per noms més curts. La primera categoria, espais en blanc i eliminació de comentaris, és senzilla i sense riscos. El segon, el canvi de nom variable, requereix entendre les regles d'abast i és el que fan millor els minificadors de producció com Terser i esbuild.
Aquesta eina se centra en la minificació segura: eliminar comentaris, col·lapsar espais en blanc, eliminar punts i coma redundants i escurçar patrons evidents. El canvi de nom de variables és conservador: només es toquen les variables locals en àmbits clars i es deixen sols els noms amb referència externa. El resultat és funcionalment idèntic a la font.
Per a la minificació de nivell de producció, les eines dedicades (Terser, esbuild, swc) entenen el model d'abast ECMAScript complet i produeixen una sortida significativament més petita. Aquesta eina serveix per a una minificació ràpida del costat del navegador quan no hi ha una configuració completa de compilació disponible.
Per què minimitzar JavaScript
Els paquets de JavaScript solen ser el recurs únic més gran d'una pàgina web moderna. La minificació produeix habitualment una reducció de mida del 30 al 60% en comparació amb la font no minificada. Combinat amb gzip o Brotli, la reducció es redueix una mica, però la combinació encara estalvia bytes mesurables, especialment per als usuaris amb connexions lentes.
JavaScript més ràpid també significa temps més ràpid per a la interacció. Els scripts més petits es descarreguen més ràpidament, s'analitzen més ràpid i s'executen més aviat. Per als llocs on TTI afecta les taxes de rebot i la classificació de SEO, la minificació és una de les victòries més barates disponibles.
Detalls tècnics
El minificador tokenitza JavaScript mitjançant un analitzador que respecta la sintaxi ECMAScript. Els comentaris (d'una línia i de diverses línies) s'eliminen, excepte els comentaris de llicència marcats amb /*! prefix. L'espai en blanc es replega, excepte quan es requereix sintàcticament (entre els identificadors, després de les paraules clau).
El canvi de nom conservador de variables escurça les variables locals en àmbits senzills. Els noms globals, exportats i importats no es canvien de nom, això trencaria les referències externes. Per canviar el nom en profunditat, utilitzeu Terser o esbuild amb una anàlisi adequada del mòdul.
Casos extrems: la inserció automàtica de punt i coma (ASI) significa que el minificador ha de conservar les noves línies en alguns contextos per evitar canviar el comportament del programa. Els literals de plantilla, els literals d'expressió regular i el JSX (si l'entrada l'inclou) es conserven exactament perquè pot ser que el seu contingut no sigui segur de comprimir.
Preguntes freqüents
- La minificació canvia el funcionament del meu codi?
- No. La minimització elimina els espais en blanc i els comentaris, que no afecten l'execució. L'escurçament de variables (manipulació) canvia el nom de les variables locals però conserva el comportament. Les variables globals i els noms exportats es mantenen intactes.
- He de minimitzar en desenvolupament o producció?
- Utilitzeu només codi minimitzat en producció. Durant el desenvolupament, manteniu el codi llegible original. La majoria de les eines de compilació (Webpack, Vite, esbuild) gestionen la minificació automàticament com a part del procés de creació de producció.
- Quina diferència hi ha entre minificació i ofuscació?
- La minificació redueix la mida alhora que manté el codi llegible funcionalment si es formatea. L'ofuscament fa que el codi sigui difícil d'entendre intencionadament (codificació de cadenes, aplanament del flux de control). Aquesta eina se centra en la reducció de la mida, no en l'ofuscament.
- Quina reducció de mida hauria d'esperar?
- Normalment 30-60% abans de gzip. El codi ben comentat amb noms de variable llargs veu les reduccions més grans. Combinats amb la compressió gzip, els fitxers JavaScript solen ser un 80-90% més petits que la font original.
- El meu codi està penjat a un servidor?
- No. El minificador s'executa al vostre navegador.
- Quant més petit serà el meu JavaScript?
- Normalment una reducció del 30-60%. El codi pesat de variables amb identificadors llargs comprimeix més; El codi pesat en expressions es comprimeix menys.
- He de reduir a mà?
- Mai. Mantenir JavaScript llegible a la font. Executeu la minificació com a pas de creació o com a part del desplegament.
- Funciona amb TypeScript?
- Primer s'ha de compilar TypeScript a JavaScript mitjançant tsc o esbuild. Un cop compilat, el JavaScript resultant es pot minimitzar.