Minifikator JavaScript
Zmniejsz pliki JavaScript i zobacz dokładnie, ile udało się zaoszczędzić.
Działa w przeglądarce. Nic, co wpiszesz, nie jest nigdzie wysyłane.
- Skraca nazwy zmiennych
- Pokazuje zaoszczędzone bajty
- Nic nie jest wysyłane
Jak zminifikować JavaScript
- Wklej swój JavaScript.
- Wyłącz Kompresję albo Skracanie nazw zmiennych, jeśli potrzebujesz zachować czytelność.
- Skopiuj albo pobierz zminifikowany plik.
Co robią osobno Kompresja i Skracanie nazw zmiennych
| Opcja | Co robi |
|---|---|
| Kompresja | Usuwa martwy kod i upraszcza wyrażenia |
| Skracanie nazw zmiennych | Zmienia nazwy lokalnych zmiennych na krótkie, jak a, b i c |
Co zostaje takie samo w obu przypadkach
- Zachowanie publiczne: te same dane wejściowe wciąż dają te same wyniki.
- Każdy ciąg znaków w kodzie, łącznie z tekstem pokazywanym użytkownikom.
- Kolejność wykonywania operacji.
- Komentarz /*! ... */, bo Terser domyślnie zachowuje ten styl, który wiele bibliotek stosuje do banerów licencyjnych.
Wskazówki do minifikacji JavaScript
- Zachowaj niezminifikowaną kopię, albo wygeneruj source map w narzędziu budującym, żeby błędy produkcyjne wciąż były czytelne.
- Wyłącz Skracanie nazw zmiennych dla biblioteki, którą będą czytać inni programiści, żeby komunikaty błędów zachowały znaczące nazwy.
- Uruchom testy na zminifikowanym wyniku przed wypuszczeniem go, bo rzadki przypadek brzegowy w minifikatorze wciąż jest możliwy, mimo że ten jest szeroko używany.
Minifikator JavaScript: najczęstsze pytania
Czy zminifikowany JavaScript wciąż jest poprawnym kodem?
Tak. Działa dokładnie tak samo jak oryginał, tylko z krótszymi nazwami i bez zbędnych białych znaków.
O ile zwykle zmniejsza się JavaScript?
Często o 30 do 60 procent, zależnie od tego, ile komentarzy i długich nazw zmiennych ma oryginał.
Co się dzieje, jeśli mój kod ma błąd składni?
Błąd pokazywany jest z linią i kolumną, w której wystąpił, więc można go poprawić i spróbować ponownie.
Jaka jest różnica między Kompresją a Skracaniem nazw zmiennych?
Kompresja przepisuje kod, aby usunąć martwe gałęzie i uprościć wyrażenia. Skracanie nazw zmiennych zmienia nazwy lokalnych zmiennych na pojedyncze litery. Każdą z tych opcji można wyłączyć osobno.
Czy to zminifikuje nowoczesną składnię, jak async i funkcje strzałkowe?
Tak, łącznie ze składnią ES2020 i nowszą, taką jak optional chaining oraz async i await.
Jakiego minifikatora to używa?
Terser, standardowego następcy UglifyJS i minifikatora, którego domyślnie używa większość bundlerów, w tym webpack, Rollup i esbuild.
Czy minifikacja może kiedykolwiek zepsuć mój kod?
Dla zwykłego kodu nie powinna zmieniać działania. Kod, który odczytuje oryginalną nazwę funkcji albo zmiennej w czasie działania, na przykład przez niestandardowe sztuczki introspekcji, może się zepsuć po skróceniu nazw. Wyłącz Skracanie nazw zmiennych, jeśli to twój przypadek.
Czy to obsługuje składnię TypeScript?
Nie, to oczekuje zwykłego JavaScript. Adnotacje typów TypeScript nie są poprawnym JavaScript i spowodują tutaj błąd składni, więc najpierw skompiluj TypeScript do JavaScript.