14 Narzędzia do zmniejszania Javascript

Modyfikacja Javascript jest techniką, która skrapla twój skrypt na znacznie mniejszą powierzchnię. Tracisz ludzką czytelność, ale oszczędzasz znaczną przepustowość - w końcu, Javascript jest przeznaczony dla Twojej przeglądarki nie dla Twoich użytkowników.

Większość witryn produkcyjnych korzysta z funkcji Javascript, ale sposób, w jaki jest to osiągane, jest bardzo zróżnicowany. Od prostych konwerterów online po bardziej wszechstronne narzędzia GUI do interfejsów wiersza poleceń - nasze opcje są bardzo zróżnicowane. W tym artykule przyjrzymy się jak działa funkcja Javascript, w jaki sposób możemy zbudować nasz przepływ pracy i jakie są plusy i minusy zminimalizowania.

Jak działa Minifikacja

Najlepszym sposobem, aby dowiedzieć się, co dzieje się po zminimalizowaniu kodu, jest zapoznanie się z repozytorium Github UglifyJS. Ten skrypt jest używany w wielu konwerterach online, a także w narzędziach GUI i narzędziach wiersza poleceń, takich jak Grunt. Oto niektóre z transformacji, których dotyczy, aby skrócić kod:

Usuwa niepotrzebne miejsce
Skraca nazwy zmiennych, zwykle do pojedynczych znaków
Łączy kolejne deklaracje var
Konwertuje tablice na obiekty, jeśli to możliwe
Optymalizuje instrukcje if
Oblicza proste wyrażenia stałe
itp.

Jako szybki przykład, oto funkcja, która zasadniczo zapisuje dany tekst.

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

witam („Witamy w artykule”);

Zobaczmy, co się stanie, gdy to zminimalizujemy. Zwróć uwagę na usunięcie spacji i wcięć oraz skrócenie zmiennej tekstowej.

funkcja hello (e) document.write (e) witaj („Witaj w artykule”)

Narzędzia do weryfikacji Javascript

Narzędzia używane do zmniejszania kodu JavaScript można ogólnie podzielić na 3 grupy: narzędzia online, narzędzia GUI i narzędzia wiersza poleceń.

W przypadku narzędzi online zazwyczaj jest to kwestia wklejenia kodu i natychmiastowego skopiowania wyniku.
Narzędzia GUI często zawierają dużo więcej funkcji; Uporządkowanie JS to tylko niewielka część tego, co robią.
Narzędzia wiersza poleceń są również zazwyczaj bardziej wszechstronne, oferując minifikację jako moduł.

Narzędzia online

javascript-minifier.com to ładne narzędzie z interfejsem API
Online YUI Compressor to potężniejsze narzędzie, które wykorzystuje kompresor YUI, z wieloma opcjami i możliwościami CSS.
jscompress.com jest bezproblemowym minifitorem, ale wykonuje zadanie
jsmini.com to kolejna prosta, ale całkowicie użyteczna opcja

Wielką zaletą narzędzi internetowych jest szybkość, z jaką można z nimi pracować. Złożone GUI i narzędzia wiersza poleceń są szybsze, ale musisz mieć skonfigurowany projekt, aby działał poprawnie. Minusem tych narzędzi jest to, że głównie niewiele dostosowuj do swoich potrzeb, przynajmniej w porównaniu z narzędziami wiersza poleceń.

Narzędzia GUI

Koala jest darmowym narzędziem do LESS, kompilacji SASS, klasyfikacji JS i wielu innych
Prepros to płatna aplikacja na wielu platformach, która oferuje jeszcze więcej opcji
Codekit to moja ulubiona aplikacja. Jest to płatna aplikacja przeznaczona tylko dla komputerów Mac, która oferuje kompilację kodu, minifikację, serwer podglądu, zarządzanie pakietami altanowymi i wiele więcej
AjaxminGui jest darmowym, jednokierunkowym narzędziem systemu Windows do minimalizowania JS
UltraMinifier to darmowa aplikacja dla OS X, która minimalizuje CSS i JS za pomocą przeciągania i upuszczania
Mniejszy jest narzędziem OS X, które służy do minimalizacji i łączenia plików dla Ciebie

Wspomniałem tutaj o dwóch typach aplikacji GUI. Proste, jednoetapowe aplikacje do sortowania są podobne do ich internetowych odpowiedników. Są niezwykle szybkie w użyciu, ponieważ można po prostu przeciągnąć i upuścić pliki do nich, bez konieczności instalacji. To powiedziawszy, oni praktycznie nie ma potrzeby dostosowywania.

Większe narzędzia GUI (Prepros, Koala, Codekit) świetnie nadają się do zarządzania projektami i dają nieco więcej opcji kompresji, ale robią to potrzebuję trochę konfiguracji. Szybka konfiguracja JS zajęłaby około 20 sekund instalacji, co jest dużo, w porównaniu do 2-sekundowego procesu online lub prostych narzędzi GUI.

Z drugiej strony oferują one ogólnie więcej funkcji i zapewniają automatyzację. Twoje pliki JS zostaną zminimalizowane za każdym razem, gdy je zapiszesz, bez potrzeby ręcznego ich sortowania. Jeśli opracowujesz coś w Javascripcie, jest to zdecydowanie droga.

Narzędzia wiersza poleceń

Minify jest dla tych, którzy chcą zminimalizować JS z linii poleceń, ale nie chcą niczego wymyślać w Grunt lub Gulp
Wspomniane wcześniej Uglify.js jest również dostępne jako samodzielne narzędzie wiersza poleceń
Grunt ma rozszerzenie do minifikacji Javascript o nazwie grunt-contrib-uglify
Gulp posiada również modyfikację JS przy użyciu Uglify.js poprzez wypaczenie

Narzędzia wiersza poleceń są nie tylko dla maniaków Linuksa! Nie jestem świetny w terminalu, ale konfigurowanie takich rzeczy jak Grunt i Gulp jest łatwe dzięki ich świetnej dokumentacji. Plusem narzędzi wiersza poleceń jest niesamowita elastyczność, jaką masz od opcji do wyjścia.

Z drugiej strony jest trochę krzywej uczenia się. Przyzwyczajony do linii poleceń bierze trochę (nie wiele) ćwiczeń, które znajdziesz restrykcyjne zanim zaczniesz cieszyć się korzyściami.

Przegląd

Jeśli jesteś nowy w tworzeniu stron internetowych, polecam jedno z pierwszych trzech narzędzi GUI. Pomogą ci w zarządzaniu projektami w ogóle i oferują znacznie więcej niż tylko ujednolicenie JS.

Jeśli jesteś doświadczonym profesjonalistą, powinieneś się tym zająć Grunt lub Gulp ponieważ oferują największą kontrolę nad zadaniami automatyzacji. Jeśli chcesz szybko zminimalizować skrypt bez zakładania projektu, narzędzia wiersza poleceń mogą zaoszczędzić dużo czasu.

Każda grupa narzędzi ma swoje wady i zalety, a prawdą jest, że w pewnym momencie prawdopodobnie użyjesz jednej z nich. Pamiętaj, że w środowisku produkcyjnym zawsze powinieneś minimalizować JavaScript i CSS!