Przejdź do treści
🛠️
Whiz Tools

Minimalizator JavaScript - Darmowe Narzędzie Online do Optymalizacji Kodu JS

Darmowe narzędzie do minimalizacji JavaScript, które redukuje rozmiar kodu poprzez usuwanie białych znaków i komentarzy. Optymalizuj pliki JS natychmiastowo bez konieczności instalacji.

Minimalizator JavaScript

O tym narzędziu

Ten prosty minimalizator JavaScript usuwa niepotrzebne białe znaki i komentarze, aby zmniejszyć rozmiar kodu. Zachowuje funkcjonalność, czyniąc kod bardziej zwartym.

  • Usuwa niepotrzebne białe znaki (spacje, tabulacje, nowe linie)
  • Usuwa komentarze (jednolinijkowe i wielolinijkowe)
  • Zachowuje literały ciągów znaków i wyrażenia regularne
  • Utrzymuje funkcjonalność kodu
Kalkulator załadunku...
📚

Dokumentacja

Czym jest minifikator JavaScriptu?

Minifikator JavaScriptu to narzędzie, które zmniejsza rozmiar kodu źródłowego JavaScriptu, usuwając znaki, których przeglądarka nie potrzebuje do jego uruchomienia, takie jak dodatkowe spacje, znaki końca wiersza i komentarze. Po minifikacji kod nadal robi dokładnie to samo. Zmienia się tylko rozmiar pliku.

Mniejsze pliki JavaScriptu pobierają się i wczytują szybciej, dlatego minifikacja jest często wykonywana przed uruchomieniem witryny.

Jak działa minifikacja JavaScriptu

To narzędzie odczytuje kod znak po znaku i rekonstruuje go, pomijając elementy potrzebne czytelnikom, ale niepotrzebne silnikowi JavaScriptu. Usuwa:

  • Komentarze, zarówno komentarze // single-line, jak i komentarze /* multi-line */, w tym komentarze w stylu JSDoc.
  • Dodatkowe spacje, tabulatory i puste wiersze, które służą wyłącznie ułatwieniu czytania kodu.

Nie dodaje ani nie usuwa niczego innego. Nigdy nie usuwa średnika, nawiasu ani żadnego innego znaku, który już znajdował się w kodzie, i nigdy nie wstawia nowej interpunkcji. Pozostawia też bez zmian kilka elementów:

  • Tekst wewnątrz napisów ("like this", 'like this') i literałów szablonowych (`like this`), nawet jeśli ten tekst zawiera spacje lub wygląda jak komentarz.
  • Literały wyrażeń regularnych, takie jak /[a-z]+/g, wraz ze wszystkimi ich flagami: d, g, i, m, s, u, v i y.
  • Każdy średnik, przecinek i nawias, który znajdował się już w oryginalnym kodzie.

Czasami nie można usunąć spacji między dwoma tokenami bez zmiany ich znaczenia. return a nie może stać się returna, ponieważ byłoby odczytane jako jedno słowo. To samo dotyczy nazw zapisanych za pomocą liter spoza alfabetu angielskiego, dlatego typeof π zachowuje spację. Gdy usunięcie spacji połączyłoby dwa tokeny, narzędzie zachowuje w jej miejscu pojedynczą spację.

Znaczenie może mieć również znak końca wiersza. JavaScript czasami automatycznie wstawia średnik na końcu wiersza; reguła ta nosi nazwę automatycznego wstawiania średników. Jeśli usunięcie znaku końca wiersza mogłoby uruchomić tę regułę albo uniemożliwić jej zastosowanie, lub jeśli znak ten występuje po zamykającej klamrze }, narzędzie zachowuje w tym miejscu pojedynczy znak nowej linii. Dlatego zminifikowany kod nie zawsze mieści się w jednym wierszu: niektóre znaki końca wiersza zmieniają znaczenie kodu i muszą pozostać.

Jak korzystać z tego minifikatora JavaScriptu

  1. Wklej kod JavaScriptu do pola wejściowego.
  2. Wybierz „Minify”.
  3. Odczytaj wynik w polu wyjściowym wraz z rozmiarem oryginalnym, rozmiarem po minifikacji i procentowym zmniejszeniem rozmiaru.
  4. Wybierz „Copy”, aby skopiować zminifikowany kod.

Minifikacja odbywa się w karcie przeglądarki, więc kod nie jest nigdzie przesyłany w celu przetworzenia. Narzędzie kopiuje również wklejony kod do adresu strony, dzięki czemu wynik można łatwo dodać do zakładek lub udostępnić. Każdy, kto widzi ten adres, może więc zobaczyć kod.

Przykład: minifikacja funkcji

Przed:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Po:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Wszystkie trzy komentarze znikają, a wcięcia zostają usunięte. Średnik po a+b pozostaje, ponieważ narzędzie nigdy nie usuwa średnika, który już znajdował się w kodzie. Pozostaje również znak końca wiersza przed const, ponieważ występuje po zamykającej }.

Przykład: minifikacja klasy

Przed:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Po:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Zwróć uwagę, że znak końca wiersza pozostaje przed każdą metodą oraz przed zamykającą klamrą klasy }. Każdy z tych znaków występuje w oryginalnym kodzie po zamykającej klamrze }, więc reguła chroniąca automatyczne wstawianie średników zachowuje je. Pozostają również średniki wewnątrz każdej metody.

Wzór na zmniejszenie rozmiaru

Narzędzie wyświetla pod polem wyjściowym trzy wartości: oryginalny rozmiar, rozmiar po minifikacji i stopień redukcji. Wszystkie rozmiary są liczbą znaków, a nie bajtów. Zmniejszenie rozmiaru jest wartością procentową zaokrągloną do najbliższej liczby całkowitej:

1reduction = round((1 - minified characters / original characters) x 100)
2

Przykład funkcji powyżej ma przed minifikacją 213 znaków, a po niej 103. Zatem 1–103 / 213 = 0,5164, czyli 51,64%, a narzędzie wyświetla 52%. Przykład klasy zmniejsza się z 515 znaków do 304, co daje 40,97%, wyświetlane jako 41%.

Ograniczenia tego minifikatora

To narzędzie usuwa tylko komentarze i białe znaki. W przeciwieństwie do narzędzi wykonywanych na etapie budowania, takich jak Terser lub UglifyJS, nie zmienia nazw zmiennych, nie usuwa nieużywanego kodu ani nie łączy plików. Narzędzia te zwykle tworzą mniejszy wynik, ale do działania wymagają procesu budowania. To narzędzie działa natychmiast w przeglądarce i nie wymaga konfiguracji, dzięki czemu sprawdza się przy szybkich kontrolach i małych fragmentach kodu, ale nie zastępuje pełnego procesu przygotowania wersji produkcyjnej.

Często zadawane pytania

Co usuwa minifikator JavaScriptu?

Usuwa komentarze i białe znaki, które nie są potrzebne do uruchomienia kodu. Nie usuwa średników, nawiasów ani żadnych innych znaków, które już należały do kodu.

Czy minifikacja JavaScriptu zmienia sposób jego działania?

Nie. Zminifikowany kod powinien dawać takie same wyniki jak oryginał. Zmienia się tylko formatowanie.

Dlaczego zminifikowany kod czasami nadal zawiera znaki końca wiersza?

Znak końca wiersza może być wymagany przez regułę automatycznego wstawiania średników w JavaScripcie albo może występować po zamykającej klamrze }. Jego usunięcie mogłoby zmienić działanie kodu, dlatego narzędzie zachowuje w tych miejscach pojedynczy znak nowej linii zamiast go usuwać.

Czy minifikacja jest tym samym co kompresja?

Nie. Minifikacja usuwa znaki z samego kodu źródłowego. Kompresja, taka jak gzip lub Brotli, koduje plik w inny sposób na potrzeby przesyłania go przez sieć. Witryny często stosują obie techniki jednocześnie.

Czy mój kod jest wysyłany na serwer?

Sam minifikator działa w całości w karcie przeglądarki, a kod nie jest przesyłany w celu minifikacji. Wklejony kod jest przechowywany w adresie strony, aby można było udostępnić wynik lub dodać go do zakładek, dlatego pojawia się na pasku adresu przeglądarki i w jej historii.

Czy zminifikowany kod można przywrócić do postaci oryginalnej?

Formater kodu może przywrócić białe znaki, ale komentarze oraz oryginalne nazwy zmiennych i funkcji znikają, chyba że zapisano oddzielną mapę źródeł.

Piśmiennictwo

  1. MDN Web Docs. "Minification." Słownik MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," sekcja 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," sekcja 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," sekcja 22.2.6, "Properties of the RegExp Prototype Object" (zestaw flag d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object