14 Værktøjer til at reducere Javascript

Javascript minificering er en teknik, som kondenserer dit script til et meget mindre fodaftryk. Du mister menneskelig læsbarhed, men du sparer betydelig båndbredde - til sidst, Javascript er beregnet til din browser ikke til dine brugere.

De fleste produktionswebsteder bruger Javascript-minering, men den måde, hvorpå dette opnås, varierer meget. Fra enkle online-omformere til mere omfattende GUI-værktøjer til kommandolinjegrænseflader er vores muligheder ret varierede. I denne artikel tager vi et kig på hvordan Javascript-minifunktion virker, hvordan vi kan opbygge det i vores workflow og hvad fordele og ulemper ved at reducere er.

Hvordan Minification fungerer

Den bedste måde at lære, hvad der sker, når du reducerer din kode, er at kigge på UglifyJS Github Repository. Dette script bruges i mange online-konverterere samt GUI-værktøjer og kommandolinjeværktøjer som Grunt. Her er nogle af de forandringer, det gælder for at gøre din kode kortere:

Fjerner unødvendigt plads
Forkorter variable navne, normalt til enkeltpersoner
Tilslutter på hinanden følgende var deklarationer
Konverterer arrays til objekter, hvor det er muligt
Optimerer hvis udsagn
Beregner simple konstante udtryk
etc.

Som et hurtigt eksempel er her en funktion, der i det væsentlige skriver en given tekst ud.

 funktion hallo (tekst) document.write (text);

hej ('Velkommen til artiklen');

Lad os se, hvad der sker, når vi reducerer dette. Bemærk fjernelsen af mellemrum og indrykning og forkortelse af tekstvariablen.

funktion hej (e) document.write (e) hej ("Velkommen til artiklen")

Javascript Redigeringsværktøjer

De værktøjer, der bruges til at minimere Javascript, kan bredt kategoriseres i 3 grupper: onlineværktøjer, GUI-værktøjer og kommandolinjeværktøjer.

Med onlineværktøjer er det normalt et spørgsmål om at indsætte din kode og kopiere resultatet straks.
GUI-værktøjer indeholder ofte meget mere funktionalitet; JS-minificering er kun en lille del af, hvad de gør.
Kommandolinjeværktøjer er også normalt mere omfattende og tilbyder minificering som et modul.

Onlineværktøjer

javascript-minifier.com er flot udseende værktøj med en API
Online YUI Compressor er et kraftigere værktøj, der bruger YUI-kompressoren, med mange muligheder og CSS-miniveringsfunktioner samt
jscompress.com er en no-frills minifier, men det bliver jobbet gjort
jsmini.com er en anden simpel men helt anvendelig mulighed

Det gode ved onlineværktøjer er den hurtighed, som du kan arbejde med dem. Komplekse GUI- og kommandolinjeværktøjer minificerer hurtigere, men du skal have et projekt oprettet, så det kan fungere korrekt. Ulempen ved disse værktøjer er det de mest give lidt til ingen tilpasning, i det mindste sammenlignet med kommandolinjeværktøjer.

GUI-værktøjer

Koala er et gratis værktøj til mindre, SASS compilation, JS-minifiering og meget mere
Prepros er en platformsbetalt app, der giver dig endnu flere muligheder
Codekit er min app af valg. Det er en betalt Mac-only-app, der tilbyder kodeopsamling, minificering, en forhåndsvisningsserver, bower pakkehåndtering og meget mere
AjaxminGui er et gratis, enkeltformat Windows-værktøj til minering af din JS
UltraMinifier er en gratis app til OS X, som miniver CSS og JS med træk og slip
Mindre er et OS X-værktøj, som minificerer og sammenkæder filer til dig

Jeg har nævnt to typer af GUI apps her. De enkle one-step-minifunktionsapplikationer ligner deres online modparter. De er ekstremt hurtige at bruge, da du bare kan trække og slippe filer ind i dem, ingen opsætning er nødvendig. Når det er sagt, de giver næsten ingen tilpasning.

Større GUI-værktøjer (Prepros, Koala, Codekit) er gode til at styre projekter og giver dig flere muligheder for kompression, men de gør har brug for en lille smule opsætning. En hurtig JS-minificering ville tage omkring 20 sekunder med opsætning, hvilket er meget i forhold til 2 sekunders proces af online eller simpelt GUI-værktøj.

På den anden side tilbyder de dig flere funktioner generelt og giver dig automatisering. Dine JS-filer vil blive reduceret hver gang du gemmer dem, du behøver ikke manuelt at reducere dem. Hvis du udvikler noget i Javascript, er det helt sikkert den rigtige vej.

Kommandolinjeværktøjer

Minify er for dem, der vil reducere JS fra kommandolinjen, men vil ikke oprette noget fancy i Grunt eller Gulp
Uglify.js, som vi tidligere har nævnt, er også tilgængelig som et frittstående kommandolinjeværktøj
Grunt har en udvidelse til Javascript-minificering, der hedder grunt-contrib-uglify
Gulp har også JS-reduktion ved hjælp af Uglify.js gennem gulp-uglify

Kommandolinjeværktøjer er ikke kun for Linux-geeks! Jeg er ikke god på terminalen, men det er nemt at opsætte ting som Grunt og Gulp gennem deres store dokumentation. Opsiden af kommandolinjeværktøjer er den fantastiske mængde fleksibilitet, du har fra muligheder til output.

På den anden side er der en bit af en læringskurve. Vænner sig til kommandolinjen tager nogle (ikke meget) praksis, som du vil finde restriktive før du begynder at nyde fordelene.

Oversigt

Hvis du er ny til webudvikling, vil jeg anbefale et af de første tre GUI-værktøjer. De vil hjælpe dig med at styre dine projekter generelt og tilbyde meget mere end bare JS-minifiering.

Hvis du er en erfaren pro du bør nok se på Grunt eller Gulp da disse giver mest kontrol over automatiseringsopgaver. Hvis du skal reducere et script hurtigt uden at oprette et projekt, kommandolinjeværktøjerne kan spare dig for meget tid.

Hver gruppe af værktøjer har deres fordele og ulemper, og i sandhed vil du sandsynligvis ende med at bruge en af hver på et eller andet tidspunkt. Husk, at når du er i et produktionsmiljø, bør du altid reducere dit Javascript og CSS!