JS minificering

JS minificering er et gratis værktøj, der fjerner overflødige tegn fra JavaScript og viser antallet af tegn før og efter minificeringen.

Hvilket problem løser minificering af JavaScript?

Minificering af JavaScript reducerer den mængde kildekode, som browseren skal downloade. Det fjerner typisk formatering som indrykninger, linjeskift og mellemrum, når tegnene ikke er nødvendige for JavaScript-syntaksen.

Et mindre script kan reducere både overførselsstørrelsen og arbejdet med at fortolke koden, især når et website leverer flere store bundles. HTTP-komprimering som Brotli eller gzip er stadig vigtig, fordi minificering og komprimering under overførsel løser forskellige dele af problemet. Minificering fjerner tegn fra kildekoden, mens komprimering koder gentagne data mere kompakt under overførslen.

Minificering udføres normalt som en del af et build før udrulning. Det er også nyttigt, når du vil kontrollere et uminificeret script fra en tredjepart, sammenligne størrelsen på bundles eller klargøre en selvstændig fil til et website uden en build-pipeline.

En vellykket minificering beviser ikke, at JavaScript-koden fungerer korrekt. Et script kan blive minificeret uden fejl og stadig indeholde forkerte API-kald, utilgængelige variabler eller kode, der først fejler under kørsel.

Hvordan bruger jeg JS minificering?

Indsæt JavaScript-koden i feltet JS, kør værktøjet, og kopiér derefter værdien fra Minificeret JS. Behold den oprindelige kildefil i versionsstyringen, og udrul den kompakte kopi i stedet for at erstatte den læsbare kildekode.

1. Kør først syntakskontrol, linting og automatiserede test på kildekoden.
2. Indsæt hele scriptet i JS, herunder eventuelle modulimports eller wrapper-funktioner, der hører til filen.
3. Sammenlign JS-tegn og Tegn i minificeret JS for at se ændringen i antallet af tegn.
4. Kontrollér, at den minificerede JavaScript-kode kører korrekt i samme browser- og udrulningsmiljø som produktionsfilen.
5. Brug et genkendeligt filnavn som app.min.js, hvis den minificerede og den læsbare version skal gemmes sammen.

Behandlingen foregår på serveren. Dit input sendes til serveren via HTTPS og gemmes ikke. Serveren skal dog stadig modtage JavaScript-koden for at kunne behandle den, så indsend ikke kildekode, som din organisation forbyder at sende til en ekstern tjeneste.

Hvad indeholder det minificerede resultat?

Resultatet indeholder den kompakte JavaScript-kode og to tegntællinger. JS-tegn er inputtets længde, mens Tegn i minificeret JS er længden på den returnerede værdi i Minificeret JS.

Antallet beregnes med PHP-funktionen mb_strlen, som måler længden af en multibyte-streng i stedet for blot at angive antallet af bytes. Antallet af tegn er derfor ikke det samme som den endelige overførselsstørrelse på netværket. UTF-8-tegn kan fylde mere end én byte, og gzip eller Brotli kan reducere den overførte fil yderligere.

Værktøjet returnerer ikke et separat felt til validering eller diagnosticering. Forvent ikke, at det finder enhver manglende parentes, ugyldig regulært udtryk eller sprogfunktion, der ikke understøttes. Især fejl, der forbindes med JSON, såsom egenskabsnavne uden anførselstegn eller afsluttende kommaer, kan ikke bruges som pålidelig kontrol af JavaScript, fordi syntaksen for JavaScript-objektliteraler og JSON er forskellig. Brug JSON validator & forskønner til JSON-data.

Små eksempler og vanskelige input

En enkel ændring af mellemrum kan se sådan ud.

Input

function add(a, b) { return a + b; }

Kompakt form

function add(a,b){return a+b;}

Formateringen omkring et objekt kan også fjernes, uden at egenskabernes værdier ændres.

Input

const settings = { theme: "dark", retries: 2 };

Kompakt form

const settings={theme:"dark",retries:2};

Den præcise formatering kan variere mellem minificeringsværktøjer, især omkring valgfrie semikoloner. JavaScript kan ikke minificeres sikkert ved blot at slette alle mellemrum og linjeskift. Sikker minificering skal tage højde for den leksikalske og syntaktiske sammenhæng, så formatering kan skelnes fra tegn, der påvirker programmet.

• Mellemrum i strenge er data. Mellemrummet i "Newcastle upon Tyne" skal bevares.
• Tegnsætning kan være en del af syntaksen. Hvis mellemrummet fjernes fra a + +b, kan det skabe en anden rækkefølge af tokens.
• Linjeskift kan påvirke automatisk indsættelse af semikolon, blandt andet i kode efter return, break eller continue. Et linjeskift umiddelbart efter throw er ikke tilladt, fordi udtrykket skal begynde på samme linje.
• Tegn med accenter og ikke-latinske tegn kan forekomme i strenge og, når JavaScripts regler for identifikatorer tillader det, i identifikatorer. Størrelsen i bytes kan afvige fra antallet af tegn.
• Tal er tokens i kildekoden, ikke instruktioner om antal tegn. Et minificeringsværktøj skal bevare deres numeriske betydning, selv hvis det vælger en kortere tilsvarende notation.

Hvornår kan det ikke betale sig at minificere JavaScript?

Det kan normalt ikke betale sig at gentage minificeringen, hvis en fil allerede er minificeret. En ekstra gennemgang kan spare lidt eller ingenting, samtidig med at build-outputtet bliver sværere at spore og muligvis ikke længere passer til eksisterende source maps.

Der er heller ikke meget grund til først at formatere og derefter minificere JavaScript, som kun skal læses af en maskine. Behold en menneskeligt læsbar kildekode til vedligeholdelse, og generér udrulningsfiler ud fra den. Til en etableret applikation er et build-værktøj som esbuild, Rollup eller webpack generelt mere velegnet, fordi det kan automatisere samling af moduler og generering af source maps. Minificering kan være indbygget eller tilføjes via konfiguration eller et plugin, mens Terser er et dedikeret minificeringsværktøj.

Brug ikke minificering som obfuskering eller adgangskontrol. Navne på funktioner og variabler kan stadig være synlige, strengværdier kan stadig læses, og browserens udviklerværktøjer kan omformatere kompakt kode. Hemmeligheder, private nøgler og privilegerede loginoplysninger må aldrig indlejres i JavaScript på klientsiden.

Hvis du klargør alle en sides statiske ressourcer, kan CSS minificering og HTML minificering udføre den tilsvarende behandling af disse formater. Brug et separat værktøj til hvert format, da reglerne for fortolkning og blanktegn er forskellige.

Ofte stillede spørgsmål

Opretter værktøjet et source map?

Nej, der returneres ikke noget felt med et source map. Hvis stack traces fra produktionen skal kunne føres tilbage til de oprindelige filer, skal du generere det minificerede script og den tilhørende .map-fil i samme build-proces. Et source map fra et andet build kan give misvisende henvisninger til linjer og kolonner.

Kan minificering forhindre andre i at kopiere min JavaScript-kode?

Nej. Browseren skal modtage eksekverbar kode på klientsiden, så en besøgende kan downloade og undersøge den. Minificering gør kildekoden mindre læsbar, men giver hverken fortrolighed, håndhævelse af licensvilkår eller reel beskyttelse af indlejrede hemmeligheder.

Kan jeg indsætte kode, der indeholder API-nøgler?

Du bør ikke indsætte hemmelige API-nøgler, tokens eller private loginoplysninger. Inputtet sendes via HTTPS og gemmes ikke, men behandlingen foregår på serveren. Offentlige browsernøgler, som bevidst distribueres til alle besøgende, skal stadig begrænses efter domæne, origin, kvote eller tilladelser, når den relevante tjeneste understøtter det.

Indlæses siden altid hurtigere, hvis antallet af tegn bliver mindre?

Nej. Effekten afhænger af den oprindelige filstørrelse, caching, forbindelsesforhold, serverkomprimering og hvor meget JavaScript browseren skal fortolke og køre. Kontrollér både den komprimerede overførselsstørrelse, kørslen og det samlede antal tegn.

Skal filendelsen stadig være .js efter minificering?

Ja. Minificeret JavaScript beholder normalt filendelsen .js, mens .min.js bruges som navngivningskonvention, når begge versioner findes. Før udrulning skal du kontrollere, at serveren sender en passende JavaScript-indholdstype, og at HTML-koden eller modulimporten peger på den ønskede fil.