14 Verktøy for å redusere Javascript

Javascript minifisering er en teknikk som kondenserer skriptet til et mye mindre fotavtrykk. Du mister menneskelig lesbarhet, men du sparer betydelig båndbredde - til slutt, Javascript er ment for nettleseren din ikke for brukerne.

De fleste produksjonsnettsteder bruker Javascript-bekreftelse, men måten dette oppnås varierer sterkt. Fra enkle Internett-omformere til mer omfattende GUI-verktøy til kommandolinjegrensesnitt, er våre alternativer ganske varierte. I denne artikkelen tar vi en titt på hvordan Javascript-justering fungerer, hvordan vi kan bygge den inn i arbeidsflyten vår og hva fordelene og ulemperene med å redusere er.

Hvordan Minifisering Fungerer

Den beste måten å lære hva som skjer når du reduserer koden din, er å se på UglifyJS Github Repository. Dette skriptet brukes i mange online-omformere, samt GUI-verktøy og kommandolinjeverktøy som Grunt. Her er noen av transformasjonene som gjelder for å gjøre koden kortere:

Fjerner unødvendig plass
Forkorter variabelnavn, vanligvis til enkeltpersoner
Sammenføyer påfølgende vardeklarasjoner
Konverterer arrays til objekter der det er mulig
Optimaliserer hvis uttalelser
Beregner enkle konstantuttrykk
etc.

Som et raskt eksempel, her er en funksjon som i hovedsak skriver noen gitt tekst ut.

 funksjon hei (tekst) document.write (text);

hei ('Velkommen til artikkelen');

La oss se hva som skjer når vi reduserer dette. Legg merke til fjerning av mellomrom og innrykning og forkorting av tekstvariabelen.

funksjon hei (e) document.write (e) hei ("Velkommen til artikkelen")

Javascript Minifunksjonsverktøy

Verktøyene som brukes til å redusere Javascript, kan i stor grad kategoriseres i 3 grupper: elektroniske verktøy, GUI-verktøy og kommandolinjeverktøy.

Med elektroniske verktøy er det vanligvis et spørsmål om å lime inn koden og kopiere resultatet umiddelbart.
GUI-verktøy inneholder ofte mye mer funksjonalitet; JS-minifisering er bare en liten del av det de gjør.
Kommandolinjeverktøy er også vanligvis mer omfattende, og tilbyr minifisering som en modul.

Online verktøy

javascript-minifier.com er snyggt verktøy med en API
Online YUI Compressor er et kraftigere verktøy som bruker YUI-kompressoren, med mange alternativer og CSS-reduksjonsegenskaper også
jscompress.com er en no-frills minifier, men det blir jobben gjort
jsmini.com er et annet enkelt, men helt brukbart alternativ

Den gode tingen med elektroniske verktøy er hastigheten som du kan jobbe med. Komplekse GUI- og kommandolinjeverktøy reduserer raskere, men du må ha et prosjekt satt opp for at det skal fungere skikkelig. Ulempen til disse verktøyene er det de mest gir liten eller ingen tilpasning, i hvert fall i forhold til kommandolinjeverktøy.

GUI-verktøy

Koala er et gratis verktøy for mindre, SASS-kompilering, JS-minifisering og mye mer
Prepros er en plattformsbetalt app som gir deg enda flere alternativer
Codekit er min app av valg. Det er en betalt Mac-only app som tilbyr kodeoppstilling, minifisering, forhåndsvisningsserver, bower pakkehåndtering og mye mer
AjaxminGui er et gratis, enkeltformat Windows-verktøy for å redusere JS
UltraMinifier er en gratis app for OS X som minifiserer CSS og JS med dra og slipp
Mindre er et OS X-verktøy som minifiserer og sammenkaller filer for deg

Jeg har nevnt to typer GUI-apper her. De enkle en-trinns minifiseringsappene er mye som deres elektroniske kolleger. De er ekstremt raske å bruke, siden du bare kan dra og slippe filer inn i dem, ingen konfigurasjon nødvendig. Når det er sagt, de gir praktisk talt ingen tilpasning.

Større GUI-verktøy (Prepros, Koala, Codekit) er gode å administrere prosjekter og gir deg litt flere muligheter for komprimering, men de gjør det trenger litt oppsett. En rask JS-minifisering vil ta omtrent 20 sekunder med oppsett som er mye, sammenlignet med 2 sekunders prosess med elektroniske eller enkle GUI-verktøy.

På den annen side gir de deg flere funksjoner generelt og gir deg automatisering. JS-filene dine blir minifisert hver gang du lagrer dem, du trenger ikke å manuelt redusere dem. Hvis du utvikler noe i Javascript, er dette definitivt veien å gå.

Kommandolinjeverktøy

Minify er for de som vil redusere JS fra kommandolinjen, men vil ikke sette opp noe fancy i Grunt eller Gulp
Uglify.js som vi tidligere har nevnt, er også tilgjengelig som et frittstående kommandolinjeverktøy
Grunt har en forlengelse for Javascript-minifisering kalt grunt-contrib-uglify
Gulp har også JS-reduksjon ved hjelp av Uglify.js gjennom gulp-uglify

Kommandolinjeverktøy er ikke bare for Linux-geeks! Jeg er ikke god på terminalen, men det er enkelt å sette opp ting som Grunt og Gulp gjennom deres gode dokumentasjon. Oppsiden av kommandolinjeverktøy er den fantastiske fleksibiliteten du har fra alternativer til utdata.

På den annen side er det a litt av en læringskurve. Venner til kommandolinjen tar litt (ikke mye) praksis som du finner restriktiv før du begynner å nyte fordelene.

Oversikt

Hvis du er ny for webutvikling, vil jeg anbefale et av de tre første GUI-verktøyene. De vil hjelpe deg med å administrere prosjektene dine generelt og tilby mye mer enn bare JS-reduksjon.

Hvis du er en erfaren pro du bør sannsynligvis se på Grunt eller Gulp da disse gir mest kontroll over automatiseringsoppgaver. Hvis du trenger å redusere et skript raskt uten å sette opp et prosjekt, kommandolinjeverktøyene kan spare deg for mye tid.

Hver gruppe verktøy har sine fordeler og ulemper, og i sannhet vil du sannsynligvis ende opp med å bruke en av hver på et eller annet tidspunkt. Husk at når du er i et produksjonsmiljø, bør du alltid redusere Javascript og CSS!