Minifikator JS

Minifikator JS to bezpłatne narzędzie, które usuwa zbędne znaki z kodu JavaScript i podaje liczbę znaków przed minifikacją oraz po niej.

Jaki problem rozwiązuje minifikacja JavaScript?

Minifikacja JavaScript zmniejsza ilość kodu źródłowego, który musi pobrać przeglądarka. Zwykle usuwa formatowanie, takie jak wcięcia, podziały wierszy i odstępy, jeśli znaki te nie są wymagane przez składnię JavaScript.

Mniejszy skrypt może ograniczyć rozmiar przesyłanych danych i ilość pracy potrzebnej do ich przetworzenia, szczególnie gdy witryna korzysta z kilku dużych pakietów. Kompresja HTTP, na przykład Brotli lub gzip, nadal ma znaczenie, ponieważ minifikacja i kompresja transmisji rozwiązują różne części problemu. Minifikacja usuwa znaki z kodu źródłowego, natomiast kompresja zapisuje powtarzające się dane w bardziej zwartej postaci na czas przesyłania.

Minifikację wykonuje się zwykle podczas kompilacji poprzedzającej wdrożenie. Przydaje się również do sprawdzania niezminifikowanego skryptu zewnętrznego, porównywania rozmiarów pakietów lub przygotowywania samodzielnego pliku dla witryny, która nie ma procesu kompilacji.

Pomyślna minifikacja nie oznacza, że kod JavaScript działa poprawnie. Skrypt może zostać zminifikowany mimo błędnych wywołań API, niedostępnych zmiennych lub kodu, który przestaje działać dopiero w czasie wykonywania.

Jak korzystać z Minifikatora JS?

Wklej kod JavaScript w polu JS, uruchom narzędzie, a następnie skopiuj wartość zwróconą w polu Zminifikowany JS. Zachowaj oryginalny plik źródłowy w systemie kontroli wersji i wdrażaj jego zwartą kopię, zamiast zastępować czytelne źródło.

1. Najpierw sprawdź składnię kodu źródłowego, uruchom linter i testy automatyczne.
2. Wklej cały skrypt do pola JS, łącznie ze wszystkimi importami modułów i funkcjami opakowującymi należącymi do pliku.
3. Porównaj wartości Znaki JS i Znaki zminifikowanego JS, aby zobaczyć zmianę liczby znaków.
4. Sprawdź, czy zminifikowany kod JavaScript wykonuje się poprawnie w tej samej przeglądarce i w takim samym środowisku wdrożeniowym jak plik produkcyjny.
5. Jeśli wersja zminifikowana i czytelna będą przechowywane razem, użyj łatwo rozpoznawalnej nazwy pliku, na przykład app.min.js.

Przetwarzanie odbywa się na serwerze. Wprowadzone dane są przesyłane na serwer przez HTTPS i nie są przechowywane. Serwer musi jednak otrzymać kod JavaScript, aby go przetworzyć, dlatego nie przesyłaj kodu źródłowego, którego Twoja organizacja zabrania przekazywać usługom zewnętrznym.

Co zawiera wynik minifikacji?

Wynik zawiera zwarty kod JavaScript oraz dwie liczby znaków. Znaki JS oznacza długość danych wejściowych, a Znaki zminifikowanego JS długość kodu zwróconego w polu Zminifikowany JS.

Liczby są obliczane za pomocą funkcji mb_strlen języka PHP, która mierzy długość ciągu wielobajtowego, zamiast podawać jedynie liczbę bajtów. Liczba znaków nie jest więc tym samym co ostateczny rozmiar danych przesyłanych przez sieć. Znaki UTF-8 mogą zajmować więcej niż jeden bajt, a gzip lub Brotli może dodatkowo zmniejszyć przesyłany plik.

Narzędzie nie zwraca osobnego pola z wynikiem walidacji ani diagnostyką. Nie należy oczekiwać, że wykryje każdy brakujący nawias, nieprawidłowe wyrażenie regularne lub nieobsługiwaną funkcję języka. W szczególności błędy kojarzone z JSON, takie jak nazwy właściwości bez cudzysłowów czy końcowe przecinki, nie są miarodajnym sposobem sprawdzania JavaScript, ponieważ składnia literałów obiektowych JavaScript różni się od składni JSON. Do danych JSON użyj Walidatora i upiększacza JSON.

Proste przykłady i kłopotliwe dane wejściowe

Proste usunięcie odstępów może wyglądać następująco.

Dane wejściowe

function add(a, b) { return a + b; }

Postać zwarta

function add(a,b){return a+b;}

Można również usunąć formatowanie wokół obiektu bez zmiany wartości jego właściwości.

Dane wejściowe

const settings = { theme: "dark", retries: 2 };

Postać zwarta

const settings={theme:"dark",retries:2};

Dokładne formatowanie może się różnić zależnie od minifikatora, szczególnie w przypadku opcjonalnych średników. Kodu JavaScript nie da się bezpiecznie skrócić przez usunięcie każdego odstępu i podziału wiersza. Bezpieczna minifikacja musi uwzględniać kontekst leksykalny i składniowy, aby odróżnić formatowanie od znaków wpływających na działanie programu.

• Spacje w ciągach znaków są danymi. Spacja w "Newcastle upon Tyne" musi pozostać.
• Znaki interpunkcyjne mogą być elementami składni. Usunięcie spacji z a + +b może utworzyć inną sekwencję tokenów.
• Podziały wierszy czasami wpływają na automatyczne wstawianie średników, między innymi w kodzie występującym po return, break lub continue. Podział wiersza bezpośrednio po throw jest niedozwolony, ponieważ wyrażenie musi zaczynać się w tym samym wierszu.
• Znaki akcentowane i znaki spoza alfabetu łacińskiego mogą występować w ciągach znaków, a jeśli pozwalają na to reguły identyfikatorów JavaScript, także w identyfikatorach. Ich rozmiar w bajtach może być inny niż liczba znaków.
• Liczby są tokenami kodu źródłowego, a nie instrukcjami dotyczącymi liczby znaków. Minifikator musi zachować ich wartość liczbową, nawet jeśli wybierze krótszy, równoważny zapis.

Kiedy minifikacja JavaScript nie ma sensu?

Zwykle nie warto ponownie minifikować pliku, który już został zminifikowany. Drugi przebieg może przynieść niewielką oszczędność lub nie przynieść jej wcale, a jednocześnie utrudnić śledzenie wyników kompilacji i potencjalnie zakłócić działanie istniejących map źródeł.

Nie ma też większego sensu najpierw formatować, a potem minifikować kodu JavaScript, który będzie odczytywany wyłącznie przez maszynę. Zachowaj czytelny kod źródłowy do celów konserwacji i generuj z niego artefakty wdrożeniowe. W przypadku rozwijanej aplikacji zwykle lepiej sprawdzi się narzędzie do kompilacji, takie jak esbuild, Rollup lub webpack, ponieważ może automatyzować łączenie modułów i generowanie map źródeł. Minifikacja może być wbudowana albo dodana przez konfigurację lub wtyczkę, natomiast Terser jest wyspecjalizowanym minifikatorem.

Nie traktuj minifikacji jako zaciemniania kodu ani kontroli dostępu. Nazwy funkcji i zmiennych mogą pozostać widoczne, literały tekstowe nadal da się odczytać, a narzędzia deweloperskie przeglądarki potrafią ponownie sformatować zwarty kod. Sekretów, kluczy prywatnych i uprzywilejowanych danych uwierzytelniających nie wolno umieszczać w kodzie JavaScript działającym po stronie klienta.

Jeśli przygotowujesz wszystkie statyczne zasoby strony, Minifikator CSS i Minifikator HTML mogą wykonać odpowiednią operację dla tych formatów. Każdy format przetwarzaj we właściwym narzędziu, ponieważ różnią się zasadami analizy składni i obsługi białych znaków.

Najczęściej zadawane pytania

Czy narzędzie generuje mapę źródeł?

Nie, narzędzie nie zwraca pola z mapą źródeł. Jeśli produkcyjne ślady stosu mają wskazywać oryginalne pliki, wygeneruj zminifikowany skrypt i odpowiadający mu plik .map w ramach tego samego procesu kompilacji. Wdrożenie mapy źródeł z innej kompilacji może prowadzić do błędnych odwołań do wierszy i kolumn.

Czy minifikacja uniemożliwi innym kopiowanie mojego kodu JavaScript?

Nie. Przeglądarka musi otrzymać wykonywalny kod po stronie klienta, więc odwiedzający może go pobrać i przeanalizować. Minifikacja zmniejsza czytelność źródła, ale nie zapewnia poufności, egzekwowania licencji ani skutecznej ochrony osadzonych sekretów.

Czy mogę wkleić kod zawierający klucze API?

Nie wklejaj tajnych kluczy API, tokenów ani prywatnych danych uwierzytelniających. Dane wejściowe są przesyłane przez HTTPS i nie są przechowywane, ale przetwarzanie odbywa się na serwerze. Publiczne klucze przeglądarkowe, które celowo udostępnia się każdemu odwiedzającemu, nadal wymagają ograniczeń domeny, źródła, limitu użycia lub uprawnień, jeśli dana usługa je obsługuje.

Czy mniejsza liczba znaków zawsze przyspieszy ładowanie strony?

Nie. Efekt zależy od pierwotnego rozmiaru pliku, pamięci podręcznej, warunków połączenia, kompresji po stronie serwera oraz ilości kodu JavaScript, który przeglądarka musi przeanalizować i wykonać. Oprócz liczby znaków sprawdź rozmiar skompresowanych danych przesyłanych przez sieć i zachowanie kodu w czasie wykonywania.

Czy po minifikacji należy zachować rozszerzenie .js?

Tak. Zminifikowany kod JavaScript zwykle zachowuje rozszerzenie .js, a .min.js stosuje się umownie, gdy dostępne są obie wersje. Przed wdrożeniem upewnij się, że serwer wysyła odpowiedni typ treści JavaScript, a kod HTML lub import modułu wskazuje właściwy plik.