14 Инструменти за намаляване на Javascript

Javascript minification е техника, която кондензира скрипта ви в много по-малък отпечатък. Вие губите четливост на хората, но запазвате значителна пропускателна способност - накрая, Javascript е предназначен за вашия браузър, а не за вашите потребители.

Повечето уебсайтове използват Javascript, но начинът, по който това се постига, варира значително. От прости онлайн конвертори до по-изчерпателни GUI инструменти до интерфейси на командния ред, нашите опции са доста разнообразни. В тази статия ще разгледаме как работи Javascript за намаляване, как можем да го изградим в нашия работен поток и какви са плюсовете и минусите на изработката.

Как работи намалението

Най-добрият начин да научите какво се случва, когато намалите кода си, е да разгледате хранилището на UglifyJS Github. Този скрипт се използва в много онлайн конвертори, както и в GUI инструменти и инструменти за команден ред като Grunt. Ето някои от трансформациите, които се прилагат, за да направите кода ви по-кратък:

Премахва ненужното пространство
Скъсява имената на променливите, обикновено до единични знаци
Присъединява последователни var декларации
Конвертира масиви в обекти, където е възможно
Оптимизира изявленията
Изчислява прости постоянни изрази
и т.н..

Като бърз пример, тук е функция, която по същество пише някои даден текст.

 функция hello (текст) document.write (текст);

hello („Добре дошли в статията“);

Нека да видим какво се случва, когато намалим това. Отбележете премахването на интервалите и отстъпите и скъсяването на текстовата променлива.

функция hello (e) document.write (e) здрасти ("Добре дошли в статията")

Инструменти за намаляване на Javascript

Инструментите, използвани за извличане на Javascript, могат да бъдат категоризирани в три групи: онлайн инструменти, инструменти на GUI и инструменти за командния ред.

С онлайн инструменти обикновено става въпрос за поставяне на кода и незабавно копиране на резултата.
Графичните инструменти често съдържат много повече функционалност; JS minification е само малка част от това, което правят.
Инструментите на командния ред също обикновено са по-изчерпателни и предлагат модулиране.

Онлайн инструменти

javascript-minifier.com е приятен инструмент с API
Онлайн YUI компресорът е по-мощен инструмент, който използва YUI компресор, с много опции и възможности за CSS миниране.
jscompress.com е финален минифийер, но свършва работата
jsmini.com е друга проста, но изцяло използваема опция

Най-хубавото при онлайн инструментите е скоростта, с която можете да работите с тях. Сложният графичен потребителски интерфейс и инструментите за командния ред намаляват по-бързо, но трябва да имате създаден проект, за да работи правилно. Недостатъкът на тези инструменти е, че те най-вече предоставят малко или никакво персонализиране, поне в сравнение с инструментите на командния ред.

GUI инструменти

Koala е безплатен инструмент за LESS, SASS компилация, JS minification и много повече
Prepros е платформа за платформи, която ви дава още повече възможности
Codekit е моето приложение за избор. Това е платен Mac-ап, който предлага компилиране на кодове, номиниране, сървър за предварителен преглед, управление на bower пакет и много други.
AjaxminGui е безплатен, едноцелево средство за Windows за минимизиране на JS
UltraMinifier е безплатно приложение за OS X, което извлича CSS и JS с плъзгане и пускане
По-малък е OS X инструмент, който фиксира и свързва файловете за вас

Тук споменах два вида GUI приложения. Простите едноетапни приложения за минимизиране са много подобни на техните онлайн партньори. Те са изключително бързи за използване, тъй като можете просто да плъзгате и пускате файлове в тях, без да е необходима настройка. Това казаха те предоставят почти никаква персонализация.

По-големите GUI инструменти (Prepros, Koala, Codekit) са чудесни в управлението на проекти и ви дават малко повече възможности за компресия, но те правят нужда от малко настройка. Бързото премахване на JS ще отнеме около 20 секунди настройка, което е много, в сравнение с процеса от 2 секунди на онлайн или прости GUI инструменти.

От друга страна, те ви предлагат повече функции като цяло и ви осигуряват автоматизация. Вашите JS файлове ще бъдат сведени до минимум всеки път, когато ги запазите, без да е необходимо ръчно да ги минимизирате. Ако сте разработване на нещо в Javascript това определено е начин да отида.

Инструменти от командния ред

Minify е за тези, които искат да намалят JS от командния ред, но не искат да създават нищо фантастично в Grunt или Gulp
Uglify.js, който споменахме по-рано, е достъпен и като самостоятелен инструмент за командния ред
Grunt има разширение за Javascript, което се нарича grunt-contrib-uglify
Gulp също има JS minification, използвайки Uglify.js чрез gulp-uglify

Инструментите на командния ред не са само за линейките на Linux! Не съм страхотен в терминала, но създаването на неща като Grunt и Gulp е лесно чрез тяхната велика документация. Инструментите на командния ред са отличната гъвкавост, която имате от опциите за извеждане.

От друга страна, има кривата на обучението. Привикване към командния ред отнема някои (не много) практики, които ще намерите ограничителни преди да започнете да се наслаждавате на ползите.

Преглед

Ако сте нов в уеб разработката, бих препоръчал едно от първите три GUI инструмента. Те ще ви помогнат да управлявате вашите проекти като цяло и да предложат много повече от просто JS minification.

Ако сте опитен професионалист, вероятно трябва да погледнете Грунт или Гълф тъй като те предлагат най-голям контрол върху задачите за автоматизация. Ако трябва бързо да намалите скрипта без създаване на проект, инструментите на командния ред могат да ви спестят много време.

Всяка група от инструменти има своите плюсове и минуси и всъщност най-вероятно ще се озовете в една или друга точка. Имайте предвид, че когато сте в производствена среда, винаги трябва да изтривате Javascript и CSS!