JavaScript Minifier — JavaScript-minifierare

Så fungerar minifiering av JavaScript

Minifiering gör JavaScript mindre utan att ändra vad koden gör. Verktyget använder Terser, en beprövad minifierare som tolkar din kod till ett abstrakt syntaxträd, omvandlar det och skriver ut koden igen utan onödiga blanksteg och kommentarer. Steget compress tillämpar dussintals optimeringar: det tar bort kod som aldrig kan nås och oanvända variabler, bäddar in konstanter, slår ihop efterföljande variabeldeklarationer, gör om if-satser till kortare villkorsuttryck där det går och räknar ut enkla konstanta uttryck i förväg. Därefter byter steget mangle namn på lokala variabler, parametrar och funktionsnamn till en eller två bokstäver. Egenskapsnamn och globala variabler lämnas orörda, så kodens publika beteende förblir detsamma.

Storleksmärkena visar UTF-8-storleken i byte för in- och utdata samt hur många procent som sparats. Vanlig handskriven kod krymper med 40–70 %; kod som redan är kompakt eller domineras av långa strängar krymper mindre. Tänk på att servrar oftast komprimerar JavaScript igen med gzip eller Brotli, så den verkliga besparingen vid överföringen är mindre än råsiffran, men minifierad kod tolkas ändå snabbare och kräver mindre bandbredd.

Välja rätt alternativ

ECMAScript target talar om för Terser vilken syntax som får användas i utdata. Med ES2020 kan den skapa pilfunktioner, optional chaining och andra moderna konstruktioner; med ES5 undviker den att införa nyare syntax, men den transpilerar inte modern kod som du själv har skrivit – använd ett verktyg som Babel eller esbuild för det. Keep console.* behåller loggningen, vilket är praktiskt för staging-byggen. Aktivera ES module för filer som använder import/export; då kan även namn på toppnivå förkortas eftersom modulens scope är privat.

Privat från grunden

Minifieraren laddas vid behov och körs lokalt, så din källkod laddas aldrig upp. Därför passar den bra för snabba engångsuppgifter, till exempel att krympa ett inline-skript, ett bokmärkesprogram (bookmarklet) eller ett kodavsnitt till en tagghanterare från tredje part. Om Terser rapporterar ett syntaxfel innehåller meddelandet rad och kolumn så att du kan rätta indata. För produktionspaket bör du låta minifieringen ligga kvar i byggkedjan så att den är reproducerbar, och generera source maps för felsökning.