Minimitzador de JavaScript

Què és un minificador de JavaScript?

Un minificador de JavaScript és una eina que redueix el codi font de JavaScript eliminant els caràcters que un navegador no necessita per executar-lo, com ara els espais addicionals, els salts de línia i els comentaris. Després de la minificació, el codi continua fent exactament el mateix. Només en canvia la mida del fitxer.

Els fitxers JavaScript més petits es descarreguen i es carreguen més ràpidament, de manera que minificar-los és un pas habitual abans de publicar un lloc web.

Com funciona la minificació de JavaScript

Aquesta eina llegeix el codi un caràcter cada vegada i el reconstrueix, eliminant tot allò que els lectors necessiten però que el motor de JavaScript no necessita. Elimina:

Els comentaris, tant els comentaris de // single-line com els comentaris de /* multi-line */, inclosos els comentaris d’estil JSDoc.
Els espais, les tabulacions i les línies en blanc addicionals que només serveixen per facilitar la lectura del codi.

No afegeix ni elimina res més. Mai no suprimeix un punt i coma, un parèntesi ni cap altre caràcter que ja fos present en el codi, i mai no insereix signes de puntuació nous. També deixa intactes diversos elements:

El text dins de les cadenes ("like this", 'like this') i dels literals de plantilla (`like this`), encara que aquest text contingui espais o sembli un comentari.
Els literals d’expressions regulars, com ara /[a-z]+/g, juntament amb tots els seus indicadors: d, g, i, m, s, u, v i y.
Tots els punts i coma, les comes i els claudàtors que ja contenia el codi original.

De vegades no es pot eliminar un espai entre dos tokens sense canviar el significat que tenen. return a no es pot convertir en returna, perquè es llegiria com una sola paraula. El mateix s’aplica als noms escrits amb lletres que no formen part de l’alfabet anglès, de manera que typeof π conserva l’espai. Quan eliminar un espai faria que dos tokens es fusionessin, l’eina conserva un sol espai.

Un salt de línia també pot ser important. De vegades JavaScript insereix automàticament un punt i coma al final d’una línia, segons una regla anomenada inserció automàtica de punts i coma. Si eliminar un salt de línia pogués activar o impedir aquesta regla, o si el salt de línia seguís una clau de tancament }, l’eina hi conserva un únic salt de línia. Per això el codi minificat no sempre queda comprimit en una sola línia: alguns salts de línia canvien el significat del codi i s’han de conservar.

Com s’utilitza aquest minificador de JavaScript

Enganxa el codi JavaScript al quadre d’entrada.
Selecciona «Minify».
Llegeix el resultat al quadre de sortida, juntament amb la mida original, la mida minificada i el percentatge de reducció.
Selecciona «Copy» per copiar el codi minificat.

La minificació s’executa dins de la pestanya del navegador, de manera que el codi no es puja enlloc per processar-lo. L’eina també copia el codi enganxat a l’adreça de la pàgina, cosa que facilita afegir un resultat a les adreces d’interès o compartir-lo. Per tant, qualsevol persona que pugui veure aquesta adreça també pot veure el codi.

Exemple: minificar una funció

Abans:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Després:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Els tres comentaris desapareixen i la indentació també. El punt i coma que hi ha després de a+b es conserva, perquè l’eina mai no elimina un punt i coma que ja fos present. El salt de línia anterior a const també es conserva, perquè segueix una clau de tancament }.

Exemple: minificar una classe

Abans:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Després:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Observa que es conserva un salt de línia abans de cada mètode i abans de la clau de tancament } de la classe. En el codi original, cadascun d’aquests salts segueix una clau de tancament }, de manera que la regla que protegeix la inserció automàtica de punts i coma els conserva. Els punts i coma dins de cada mètode també es mantenen.

Fórmula de reducció de mida

L’eina mostra tres valors sota el quadre de sortida: la mida original, la mida minificada i la reducció. Totes les mides són recomptes de caràcters, no de bytes. La reducció és un percentatge arrodonit al nombre enter més proper:

1reduction = round((1 - minified characters / original characters) x 100)
2

L’exemple de funció anterior té 213 caràcters abans de la minificació i 103 després. Per tant, 1–103 / 213 = 0,5164, que és 51,64 %, i l’eina mostra 52 %. L’exemple de classe passa de 515 caràcters a 304, que correspon a 40,97 %, mostrat com a 41 %.

Límits d’aquest minificador

Aquesta eina només elimina comentaris i espais en blanc. A diferència de les eines de compilació com Terser o UglifyJS, no canvia el nom de les variables, no elimina codi sense utilitzar ni combina fitxers. Aquestes eines solen produir una sortida més petita, però necessiten un procés de compilació per executar-se. Aquesta eina funciona instantàniament al navegador i no requereix cap configuració, cosa que la fa adequada per a comprovacions ràpides o fragments petits, però no per a un procés complet de posada en producció.

Preguntes freqüents

Què elimina un minificador de JavaScript?

Elimina els comentaris i els espais en blanc que no són necessaris perquè el codi s’executi. No elimina els punts i coma, els claudàtors ni cap altre caràcter que ja formés part del codi.

Minificar JavaScript canvia la manera com s’executa?

No. El codi minificat hauria de produir els mateixos resultats que l’original. Només en canvia el format.

Per què el codi minificat de vegades encara té salts de línia?

Un salt de línia pot ser necessari a causa de la regla d’inserció automàtica de punts i coma de JavaScript, o pot seguir una clau de tancament }. Eliminar-lo podria canviar el comportament del codi, de manera que l’eina conserva un únic salt de línia en aquests punts en lloc d’eliminar-lo.

La minificació és el mateix que la compressió?

No. La minificació elimina caràcters del mateix codi font. La compressió, com ara gzip o Brotli, codifica el fitxer d’una manera diferent per transferir-lo per una xarxa. Els llocs web solen utilitzar totes dues tècniques conjuntament.

El meu codi s’envia a un servidor?

El minificador s’executa íntegrament a la pestanya del navegador, i el codi no es puja per minificar-lo. El codi enganxat s’emmagatzema a l’adreça de la pàgina perquè el resultat es pugui compartir o afegir a les adreces d’interès, de manera que apareix a la barra d’adreces del navegador i a l’historial.

Es pot tornar el codi minificat a l’original?

Un formatador de codi pot restaurar els espais en blanc, però els comentaris i els noms originals de les variables i les funcions desapareixen, tret que s’hagi desat un mapa de codi font independent.

Referències

MDN Web Docs. "Minification." Glossari de MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
ECMA International. "ECMAScript Language Specification," secció 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
ECMA International. "ECMAScript Language Specification," secció 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
ECMA International. "ECMAScript Language Specification," secció 22.2.6, "Properties of the RegExp Prototype Object" (el conjunt d’indicadors d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object

Minimitzador de JavaScript - Optimitzador de Codi JS Gratuït

Sobre aquesta eina

Documentació