14 Nástroje pro minifikování Javascriptu

Zhuštění JavaScriptu je technika, která kondenzuje váš skript na mnohem menší stopu. Ztrácíte čitelnost člověka, ale šetříte značnou šířku pásma - nakonec, Javascript je určen pro váš prohlížeč, nikoli pro uživatele.

Většina produkčních webů používá zhuštění Javascriptu, ale způsob, jak toho dosáhnout, se velmi liší. Od jednoduchých online převodníků až po rozsáhlejší nástroje GUI pro rozhraní příkazového řádku jsou naše možnosti velmi pestré. V tomto článku se podíváme jak funguje zpřesnění JavaScriptu, jak ji můžeme vybudovat do našeho pracovního postupu a jaké jsou výhody a nevýhody minifikace.

Jak funguje Minifikace

Nejlepším způsobem, jak se dozvědět, co se stane, když váš kód minifikujete, je podívat se na úložiště UglifyJS Github. Tento skript je používán v mnoha online konvertorech, stejně jako GUI nástroje a nástroje příkazového řádku jako Grunt. Zde je několik transformací, které se používají pro zkrácení kódu:

Odstraní zbytečné místo
Zkracuje názvy proměnných, obvykle na jednotlivé znaky
Spojuje po sobě následující var prohlášení
Převádí pole na objekty tam, kde je to možné
Optimalizuje příkazy
Vypočítá jednoduché konstantní výrazy
atd.

Jako rychlý příklad je zde funkce, která v podstatě zapisuje určitý text.

 funkce hello (text) document.write (text);

ahoj ('Vítejte v článku');

Podívejme se, co se stane, když to zlehčíme. Všimněte si odstranění mezer a odsazení a zkrácení proměnné textu.

function hello (e) document.write (e) Ahoj ("Vítejte v článku")

Nástroje pro minimalizaci Javascriptu

Nástroje používané pro zhuštění Javascriptu lze široce rozdělit do 3 skupin: online nástroje, nástroje GUI a nástroje příkazového řádku.

S online nástroji je to obvykle záleží na vložení kódu a okamžitém kopírování výsledku.
Nástroje GUI často obsahují mnohem více funkcí; JS minifikace je jen malá část toho, co dělají.
Nástroje příkazového řádku jsou také obvykle obsáhlejší a nabízejí minifikaci jako modul.

Nástroje online

javascript-minifier.com je pěkný nástroj s rozhraním API
Online YUI Compressor je výkonnější nástroj, který používá kompresor YUI, se spoustou možností a možností CSS minifikace.
jscompress.com je ne-ozdůbka minifier, ale dostane práci
jsmini.com je další jednoduchá, ale zcela použitelná volba

Skvělá věc, o on-line nástroje je rychlost, s níž můžete pracovat s nimi. Komplexní GUI a nástroje příkazového řádku zrychlují, ale musíte mít nastavený projekt, aby fungoval správně. Nevýhodou těchto nástrojů je, že většinou poskytují jen málo až žádné úpravy, přinejmenším ve srovnání s nástroji příkazového řádku.

Nástroje GUI

Koala je bezplatný nástroj pro LESS, SASS kompilaci, JS minifikaci a mnoho dalšího
Prepros je placená aplikace, která vám poskytuje více možností
Codekit je moje volba. Jedná se o placenou aplikaci pro Mac, která nabízí kompilaci kódu, minifikaci, náhledový server, správu balíčků a mnoho dalšího.
AjaxminGui je bezplatný, jednoúčelový nástroj Windows pro zhuštění vašeho JS
UltraMinifier je bezplatná aplikace pro OS X, která umlčí CSS a JS přetažením
Menší je nástroj OS X, který pro vás zkomprimuje a zřetězí soubory

Zmínila jsem zde dva typy GUI aplikací. Jednoduché aplikace s jedním stupněm zhuštění jsou podobně jako jejich online protějšky. Jsou velmi rychle použitelné, protože do nich můžete jednoduše přetahovat soubory bez nutnosti instalace. To znamená, že poskytovat prakticky žádné úpravy.

Větší GUI nástroje (Prepros, Koala, Codekit) jsou skvělé pro správu projektů a dávají vám trochu více možností pro kompresi, ale dělají to potřebujete trochu nastavení. Rychlé zrychlení JS by trvalo asi 20 vteřin nastavení, což je hodně ve srovnání s 2 sekundovým procesem online nebo jednoduchých nástrojů GUI.

Na druhé straně vám nabízejí více funkcí obecně a poskytují vám automatizaci. Soubory JS budou zkopírovány pokaždé, když je uložíte. Pokud něco vyvíjíte v Javascriptu, je to určitě cesta.

Nástroje příkazového řádku

Minify je pro ty, kteří chtějí zkompilovat JS z příkazové řádky, ale nechtějí v Gruntu nebo Gulpu nic vytvořit.
Uglify.js, které jsme již zmínili, je také k dispozici jako samostatný nástroj příkazového řádku
Grunt má příponu pro Javascript minification s názvem grunt-contrib-uglify
Gulp také má JS minification používat Uglify.js přes gulp-uglify

Nástroje příkazového řádku nejsou jen pro Linuxové nadšence! V terminálu nejsem skvělý, ale nastavení věci jako Grunt a Gulp je snadné díky jejich skvělé dokumentaci. Nahoru nástroje příkazového řádku je úžasné množství flexibility, kterou máte od možností výstupu.

Na druhé straně existuje bit křivky učení. Zvyknout si na příkazový řádek trvá několik (ne mnoho) praxe, které najdete restriktivní dříve, než začnete využívat výhod.

Přehled

Pokud jste novým vývojem webu, doporučil bych jeden z prvních tří nástrojů GUI. Pomohou vám spravovat vaše projekty obecně a nabídnou mnohem více než jen JS minifikace.

Pokud jste zkušený profesionál, měli byste se asi podívat Grunt nebo Gulp ty nabízejí největší kontrolu nad úkoly automatizace. Pokud potřebujete skript rychle minifikovat projektu, nástroje příkazového řádku vám mohou ušetřit spoustu času.

Každá skupina nástrojů má své klady a zápory a ve skutečnosti pravděpodobně skončíte s použitím jednoho z nich v určitém okamžiku nebo jiném. Mějte na paměti, že pokud jste ve výrobním prostředí, měli byste vždy Javascript a CSS minifikovat!