Jak zminimalizować JavaScript — zalecane narzędzia i metody

Większość użytkowników pragnie eleganckiego przeglądania stron internetowych, a JavaScript od dawna jest ulubionym narzędziem programistów, którzy zapewniają tak zaawansowane wrażenia.

Jednak JavaScript nie służy tylko do upiększania witryn. Wpływa również bezpośrednio na wydajność i sukces witryny. Przyspieszenie witryny lub skrócenie czasu ładowania strony — dwie koncepcje, które są kluczowe w rozwoju języka JavaScript — są kluczowymi czynnikami poprawiającymi wrażenia użytkownika.

Jeśli chcesz zwiększyć wydajność swojej witryny w jak najkrótszym czasie, ​musisz zapoznać się z minifikacją JavaScript. Pomoże Ci wykluczyć wszystkie niepotrzebne znaki z kodu źródłowego JavaScript bez zmiany jego funkcjonalności. Co więcej, skróci to czas ładowania Twojej witryny i wykorzystanie przepustowości.

Minifikacja JavaScript może być trudna. W tym artykule zaplanujemy kurs, który pomoże Ci zminimalizować kod JavaScript dla witryn WordPress i innych niż WordPress.

Co to jest JavaScript?

JavaScript to tekstowy język skryptowy do tworzenia interaktywnych stron internetowych zarówno po stronie klienta, jak i serwera. Jest to prostszy i mniej złożony język do nauczenia się niż większość, co wyjaśnia jego powszechne użycie.

Podczas gdy HTML i CSS budują strukturę witryny, JavaScript dodaje złożone funkcje, które wprowadzają interaktywność do Twojej witryny, aby zaangażować użytkowników. Na przykład JavaScript oferuje złożone elementy, takie jak przewijana szafa grająca wideo, filmy 2D/3D i interaktywne mapy.

Warto zauważyć, że przeglądarki internetowe mogą rozumieć JavaScript. Dlatego, obok HTML i CSS, jest to dobry wybór, jeśli jesteś zainteresowany tworzeniem stron internetowych. Jeśli potrzebujesz stworzyć wysoce interaktywną stronę internetową, która działa we wszystkich przeglądarkach bez żadnych przeszkód, to JavaScript jest najbardziej niezawodną opcją, jaką możesz zastosować.

Co to jest minimalizacja kodu?

Minifikacja jest również nazywana minimalizacją. Minifikacja kodu oznacza optymalizację kodu w celu zaoszczędzenia miejsca, skrócenia czasu ładowania strony i obniżenia wykorzystania przepustowości witryny. Jednak największym problemem jest zminimalizowanie kodu bez zmiany funkcjonalności.

Minifikacja kodu jest możliwa we wszystkich podstawowych technologiach programowania, w tym HTML, CSS i — jak zaraz zobaczymy — JavaScript. Jednak proces ten nie jest natychmiastowy. Trochę pracy włożono w sprawienie, by kod był bardziej zwarty, przy jednoczesnym zachowaniu jego funkcjonalności.

Aby zminimalizować kod JavaScript, musisz go przeanalizować, skompresować i uzyskać dane wyjściowe. Po pomniejszeniu powinien być prawie nieczytelny gołym okiem. Usunąłeś wszystkie niepotrzebne spacje, komentarze, znaki nowego wiersza i wszystko, co początkowo czyniło kod czytelnym.

Być może będziesz musiał wprowadzić również dalsze zmiany w kodzie — na przykład wstawianie funkcji, usuwanie ograniczników bloków, używanie niejawnych warunków warunkowych lub przepisywanie zmiennych lokalnych.

Przykłady niezminifikowanego i zminimalizowanego kodu JavaScript

Rzućmy okiem na przykładowy kod. Ten pierwszy blok to zwykły, niezminifikowany JavaScript:

 // program to check if the string is palindrome or not function checkPalindrome(str) { // find the length of a string const len = string.length; // loop through half of the string for (let i = 0; i < len / 2; i++) { // check if first and last string are same if (string[i] !== string[len - 1 - i]) { return 'It is not a palindrome'; } } return 'It is a palindrome'; } // take input const string = prompt('Enter a string: '); // call the function const value = checkPalindrome(string); console.log(value);

Zobaczmy teraz, jak wygląda ten sam kod po zminimalizowaniu:

 function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++) if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"} const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);

Jak widać, drugi blok kodu jest znacznie mniejszy i bardziej zwarty. Oznacza to, że ładuje się i renderuje szybciej, skracając czas ładowania strony i przyspieszając zawartość.

Tutaj zmniejszyliśmy 529 bajtów do 324 bajtów, zyskując 205 bajtów wolnego miejsca i zmniejszając obciążenie strony o prawie 40%.

To tak, jakby wziąć 529-stronicową książkę i skondensować ją w 324-stronicowej książce. Oczywiście, człowiek miałby trudności z jego odczytaniem, ale maszyna bez problemu przeszłaby przez nie.

Podczas łączenia wielu plików JavaScript w pojedynczy plik zminifikowany, minifikacja kodu zmniejsza liczbę żądań HTTP do serwera. Zmniejsza to również zużycie przepustowości przez witrynę. Co więcej, minimalizacja kodu skraca czas uruchamiania skryptu — wszystko to, co skraca czas do pierwszego bajtu (TTFB).

Dlaczego warto zminimalizować kod JavaScript?

Podczas pisania początkowego kodu większość programistów skupia się przede wszystkim na wykonywaniu zadań. Na tej drodze mają tendencję do używania wielu komentarzy, odstępów i zmiennych, aby kod był bardziej czytelny dla innych osób pracujących z nim w przyszłości.

Pomimo tego, że jest doskonałym językiem programowania, JavaScript wpływa na strony internetowe, spowalniając je. Aby odzyskać miejsce i poprawić szybkość ładowania strony, musisz zminimalizować kod JavaScript.

Zminimalizowana wersja kodu JavaScript może zmniejszyć rozmiar pliku nawet o 30–90%. W konsekwencji minifikacja JavaScript stała się znanym rytuałem dla wszystkich programistów.

Każdy główny deweloper biblioteki JavaScript (Angular, Bootstrap itd.) udostępnia zminimalizowaną wersję JavaScript do wdrożenia produkcyjnego. I każdy z nich używa rozszerzenia min.js , aby to wskazać.

Korzyści z minimalizacji kodu JavaScript

Oto krótki zarys korzyści, jakie osiągniesz po zastosowaniu minifikacji JavaScript:

• Skrócenie czasu ładowania strony
• Mniejsze zużycie przepustowości Twojej witryny
• Krótszy czas wykonania skryptu
• Mniej żądań HTTP (i mniejsze obciążenie) serwera
• Ochrona przed kradzieżą (zminimalizowane lub ubogie wersje są skomplikowane do odczytania i kradzieży w celu ponownego wykorzystania)

Różnica między minimalizacją, uglifikacją i kompresją JavaScript

Minifikacja, uglifikacja lub kompresja JavaScript są podobne pod względem funkcjonalności. Mają jednak różne cele.

Uglify JavaScript przepisuje kod, aby był mniej czytelny dla człowieka. Proces usuwa białe znaki, średniki i komentarze podczas zmiany nazw zmiennych i funkcji wbudowanych, aby kod był trudny do odczytania.

JavaScript posiada bibliotekę o nazwie UglifyJS, która automatycznie modyfikuje kod. Poprawia wydajność i zmniejsza czytelność, aby kod był bezpieczny i mniej atrakcyjny dla złodziei.

Kompresja różni się od minifikacji lub ulifikowania. Wykorzystuje algorytm kompresji, taki jak GZIP, do przepisywania kodu do formatu binarnego, dzięki czemu jest znacznie mniejszy i szybciej się ładuje.

Podczas gdy minifikacja oznacza redukowanie białych znaków i komentarzy, całkowite ulepszenie kodu przekształca go w nieczytelną formę poprzez zmianę nazw funkcji, nazw zmiennych itp. A kompresja przepisuje kod w formacie binarnym, aby zmniejszyć rozmiar pliku.

Zarówno minifikacja, jak i kompresja są odwracalne, co oznacza, że ​​możesz przywrócić kod do jego pierwotnej postaci, ale uglifikacja jest nieodwracalna.

Jak zminimalizować kod JavaScript?

Możesz zminimalizować swój kod JavaScript na różne sposoby. Każda z tych metod ma inne podejście od innych.

Ręczna minimalizacja wszystkich kodów w dużych plikach JavaScript jest prawie niemożliwa. Ręczne minimalizowanie plików JavaScript jest możliwe tylko w przypadku małych plików, ponieważ jest to czasochłonne.

Aby rozpocząć ręczny proces minifikacji JavaScript, otwórz plik JavaScript w swoim ulubionym edytorze tekstu i ręcznie usuń wszystkie spacje jedna po drugiej. Usunięcie wszystkich spacji i komentarzy ustawionych dla pliku JavaScript zajmie kilka minut. Niektóre z tych edytorów tekstu mogą nawet obsługiwać wyrażenia regularne, co może znacznie przyspieszyć proces.

Inną opcją jest zainstalowanie narzędzi minifikacji na komputerze i korzystanie z nich z wiersza poleceń. Musisz wybrać plik, który chcesz zminimalizować i dodać go do przełącznika wiersza poleceń wraz z plikiem docelowym. Wtedy narzędzie minifikacyjne zajmie się resztą.

Jak ręcznie zminimalizować JavaScript: 5 najlepszych narzędzi

Programiści polegają na kilku narzędziach do minifikacji JavaScript, aby zminimalizować kod i osiągnąć lepszą wydajność. Jednak każdy programista ma swoje indywidualne preferencje i wybiera inne narzędzie. Istnieje wiele narzędzi do minifikacji JavaScript, z których wszystkie mają różne cechy, więc musisz dokładnie rozważyć swój wybór.

Nie wymieniamy tych narzędzi według żadnego rankingu ani kategorii. Zawarliśmy tylko najskuteczniejsze i najbardziej popularne narzędzia do minifikacji JavaScript.

Oto najlepsze narzędzia do minifikacji JavaScript, które pomogą Ci zwiększyć wydajność sieci.

1. JSMin

JSMin to dedykowane narzędzie do minifikacji JavaScript i biblioteka wiersza poleceń, aby zminimalizować kod JavaScript i uczynić go tak lekkim, jak to tylko możliwe. Wystarczy zainstalować JSMin jako globalny skrypt, a bardzo skutecznie usunie wszystkie spacje i niepotrzebne komentarze z kodu. W rezultacie może natychmiast zmniejszyć rozmiar pliku JavaScript o około 50%.

Tak więc zmniejszony rozmiar da możliwość szybkiego pobierania. Zauważysz również wzrost bardziej komunikatywnego stylu programowania jako koszt pobierania nowych, literackich autodokumentów.

Jednak JSMin ma jedną wadę, nie daje optymalnych oszczędności. Ze względu na swój uproszczony algorytm pozostawia wiele znaków nowego wiersza bez zmian. W przeciwnym razie może wprowadzić nowe błędy w kodzie.

2. Minifikacja Microsoft Ajax

Microsoft Ajax Minifier umożliwia poprawę wydajności aplikacji internetowych poprzez zmniejszenie rozmiaru plików JavaScript i CSS. Usuwa komentarze, niepotrzebne spacje, średniki, funkcje i nawiasy.

Oprócz skrócenia zmiennych lokalnych, nazw funkcji, cudzysłowu/podwójnego cudzysłowu, łączenia sąsiadujących ze sobą deklaracji zmiennych, usuwa niewykonane kody.

Dzięki AjaxMin możesz analizować produktywność i ładować minifikator JS w tle. A kiedy zakończy minifikację, możesz otworzyć folder produktywności.

3. Kompilator zamknięć Google

Google Closure Compiler to kolejne doskonałe narzędzie do minifikacji JavaScript. Formułuje JavaScript w celu szybkiego pobierania i płynniejszej wydajności. Weryfikuje również składnię i zmienne sugestie, usuwa martwy kod i typy oraz powiadamia o wadach JavaScript. To narzędzie gromadzi Twój kod JavaScript, ocenia go, usuwa zbędny kod i przepisuje go.

Zapewnia również ostrzeżenia o nielegalnym JavaScript i potencjalnie niebezpiecznych operacjach. Co więcej, jest to właściwy kompilator od zwykłego JavaScript do lepszego i zminimalizowanego JavaScript.

4. Kompresor YUI

Kompresor YUI to narzędzie do minifikacji JavaScript i CSS z wiersza poleceń, które zapewnia wyższy współczynnik kompresji niż większość innych. Jest to narzędzie do minifikacji napisane w Javie i opiera się na Rhino do tokenizacji źródłowego pliku JavaScript.

Po pierwsze, YUI sprawdza źródłowy plik JavaScript w celu określenia jego konstrukcji. Następnie wypisuje strumień tokenów. Następnie usuwa jak najwięcej białych znaków i zastępuje wszystkie lokalne symbole symbolem składającym się z 1 (lub 2 lub 3) litery.

Ponieważ kompresor YUI jest oprogramowaniem typu open source, możesz sprawdzić kod źródłowy, aby dowiedzieć się, jak to działa. Ponadto YUI jest najbezpieczniejszym narzędziem do minifikacji JavaScript z wymownym współczynnikiem kompresji.

5. UglifyJS

UglifyJS to jedno z najpopularniejszych narzędzi do minifikacji JavaScript. Potrafi analizować, minimalizować i kompresować kod JavaScript. Poza tym narzędzie generuje plik mapy źródłowej podczas kompresji, aby wrócić do oryginalnego kodu.

Ponadto może pobierać wiele plików wejściowych jednocześnie, najpierw analizując pliki wejściowe, a następnie analizując opcje.

UglifyJS analizuje pliki wejściowe w kolejności i stosuje dowolne opcje kompresji. Pliki są parsowane w tym samym globalnym zakresie, co oznacza, że ​​odwołanie z jednego pliku do zmiennej/funkcji zadeklarowanej w innym pliku zostanie odpowiednio dopasowane.

Jak automatycznie zminimalizować JavaScript: 5 najlepszych narzędzi online

Istnieje mnóstwo minifikatorów JavaScript online, które kompresują Twój kod online. Prawie wszystkie narzędzia do minifikacji JavaScriptu online podlegają podobnemu procesowi minifikacji.

Najpierw skopiuj i wklej kod źródłowy JavaScript lub prześlij plik kodu źródłowego do narzędzia. Następnie zoptymalizujesz ustawienia narzędzia minifikacji, aby uzyskać określone dane wyjściowe oparte na wymaganiach, jeśli dostępne są opcje.

Na koniec weźmiesz ten zminimalizowany plik i użyjesz go na stronie internetowej zamiast oryginalnego, rozszerzonego kodu (chociaż na wszelki wypadek powinieneś zachować oryginalny plik z kodem źródłowym).

Oto 5 najlepszych narzędzi do minifikacji JavaScript online, które pomogą Ci zwiększyć wydajność sieci. Chociaż nie wymieniamy tych narzędzi w żadnej określonej kolejności ani kategorii, uwzględniliśmy tylko najpopularniejsze i najskuteczniejsze rozwiązania minifikacji JavaScript.

1. Najlepszy minifikator JavaScript

Toptal JavaScript Minifier oferuje wydajny, ale prosty minifikator JavaScript online, w którym możesz skondensować swój JavaScript w ciągu kilku sekund. Pozwala również przekonwertować kod do pliku .js do wykorzystania w przyszłości.

2. JSCompress

JSCompress może zminimalizować i zmniejszyć rozmiar twojego JavaScriptu o 80%. Oferuje prosty interfejs typu „kliknij i idź”, w którym możesz wkleić kod lub przesłać plik .js w celu minifikacji. Otrzymasz zminimalizowane dane wyjściowe jako czysty, możliwy do skopiowania kod, a nie plik .js . Warto zauważyć, że narzędzie wykorzystuje UglifyJS i Babel-minify do minimalizacji i kompresji JavaScript.

3. Minifier.org

Minfier.org to jeden z najprostszych minifikatorów JavaScript, których możesz użyć do zminimalizowania swoich kodów. Wykorzystuje wiele metod do minimalizacji kodu JavaScript. Narzędzie waży rozmiar kodu JavaScript zarówno przed, jak i po minifikacji. Następnie oblicza wzmocnienie skryptu po minifikacji i wyświetla go na ekranie.

4. TutorialsPoint Online Minifikator JavaScript

Możesz wprowadzić plik .js , podać adres URL lub bezpośrednio wkleić surowy kod do narzędzia minifikatora JavaScript TutorialsPoint. Narzędzie ma edytowalne pole do bezpośredniego kodowania, jeśli chcesz. Ponadto ma opcję minifikacji jednym kliknięciem, a zminifikowany kod można pobrać w pliku .js .

5. Packer: kompresor JavaScript Dean Edwards

Jeśli potrzebujesz skompresować kod JavaScript, Packer autorstwa Deana Edwardsa może zapewnić Ci jedno z najbardziej satysfakcjonujących doświadczeń kompresji JavaScript online. Działa z tokenami/atomami JavaScript oraz wzorcami bitowymi i bajtowymi.

Poza tym pozwala na zaimplementowanie opcji kodowania Base62 i zmniejszania zmiennych podczas minimalizowania kodu. Aby zminimalizować kod JS, skopiuj go i wklej do JavaScript, a następnie naciśnij przycisk paczki. Automatycznie wygeneruje dla Ciebie skrócony kod.

Jak zminimalizować JavaScript w WordPress: 5 najlepszych narzędzi i wtyczek

Minifikacja JavaScript przebiega według innej procedury w WordPress. Minifikacja JavaScript wymaga obsługi hosta lub zainstalowania wtyczki WordPress. Po zainstalowaniu wtyczki minifikacji WordPress zajmie się procesem minifikacji za Ciebie.

Istnieje wiele wtyczek WordPress do minifikacji JavaScriptu. Większość z tych wtyczek podlega tej samej procedurze minifikacji i można je uruchomić z pulpitu WordPress.

Przyjrzyjmy się niektórym z najskuteczniejszych narzędzi do modyfikacji JavaScript w WordPress:

1. Minifikacja kodu w MyKinsta

Jeśli jesteś klientem Kinsta, możesz skorzystać z naszej funkcji minifikacji kodu, aby zminimalizować pliki JS i CSS swojej witryny. Wszystko, co musisz zrobić, to włączyć Kinsta CDN i zaznaczyć kilka pól wyboru na pulpicie nawigacyjnym MyKinsta. Nie musisz instalować żadnych wtyczek innych firm — Twoje pliki zostaną teraz zminimalizowane.

Ta minifikacja występuje w sieci brzegowej Cloudflare, która zasila również Kinsta CDN. Wszystkie Twoje zminifikowane pliki są również buforowane w sieci Cloudflare, co przekłada się na dodatkowe korzyści w zakresie wydajności.

2. Całkowita pamięć podręczna W3

W3 Total Cache pozwala zminimalizować JavaScript, CSS i HTML z precyzyjną kontrolą. Poza tym pozwala na zminimalizowanie wbudowanego, osadzonego lub dowolnego kodu JavaScript lub CSS innej firmy. Poza minifikacją, opóźnia również JavaScript i CSS w celu szybszego ładowania strony. Ponadto wtyczki oferują wiele możliwości minifikacji JavaScript dla witryn WordPress.

3. Optymalizacja WP

WP-Optimize to wtyczka do optymalizacji WordPress, która oferuje zaawansowane narzędzie do minifikacji do minimalizacji CSS i JavaScript, a także do czyszczenia pamięci podręcznej i optymalizacji witryny WordPress. Umożliwia także odroczenie CSS i JavaScript. W rezultacie witryna ładuje niekrytyczne zasoby po załadowaniu strony głównej, poprawiając wydajność strony.

4. Autooptymalizacja

Autoptimize to wtyczka minifikacyjna WordPress, która agreguje, minifikuje i buforuje niezagregowane CSS i JavaScript, aby skrócić czas ładowania strony i poprawić wydajność Twojej witryny. Może minimalizować i buforować skrypty, wstawiać krytyczny JavaScript oraz asynchronicznie nie zagregować JavaScript.

Jeśli nie możesz się doczekać wtyczki WordPress do minifikacji JavaScript, która skupi się przede wszystkim na wydajności Twojej witryny, Autoptimize to doskonały wybór.

5. Szybka minimalizacja prędkości

Fast Velocity Minify oferuje zaawansowaną minifikację JavaScript, CSS i HTML dla użytkowników WordPress. Wykonuje minifikację na interfejsie użytkownika, gdy wystąpi pierwsze niebuforowane żądanie. Poza tym wtyczka ma prosty interfejs użytkownika i prostą użyteczność.

Streszczenie

Uzyskanie najwyższej wydajności ze swojej strony internetowej wymaga zwrócenia uwagi na drobne szczegóły. W ten sposób, minimalizując HTML, CSS i JavaScript, wprowadź listę zadań do wykonania w witrynie.

Zbadaliśmy wiele narzędzi i wtyczek, które mogą pomóc w minifikacji JavaScript. Jednak każde wspomniane narzędzie lub wtyczka służy temu samemu celowi i działa wydajnie.
Minifikacja JavaScript może być trudna... ale ten przewodnik jest tutaj, aby pomóc Kliknij, aby tweetować
W zależności od przypadku użycia wybierz narzędzie z tej listy i zacznij minimalizować kod JavaScript, aby przyspieszyć działanie witryny.

Czy przegapiliśmy jakieś narzędzie do minifikacji JavaScript lub wtyczkę do minifikacji WordPress, którą lubisz? Daj nam znać w sekcji komentarzy!