DokumentyObrazyMediaNarzędzia PDF

Minifikuj JavaScript Online

Optymalizuj rozmiar swojego pakietu JavaScript. Minifikuj lub formatuj natychmiast.

Processed in your browser

Lżejszy JavaScript, szybsze aplikacje

Redukcja 40–60%

Usuwa białe znaki, komentarze i skraca zmienne bez zmiany funkcjonalności.

Prywatność

JS jest przetwarzany w Twojej przeglądarce. Nigdy nie jest przesyłany na żaden serwer.

Dwukierunkowy

Minifikuj dla produkcji lub formatuj zminifikowany JS, aby go czytać i debugować.

Natychmiastowy

Wyniki w milisekundy. Bez przetwarzania po stronie serwera.

Trzy kroki, żadnych komplikacji

1

Wklej lub prześlij plik JavaScript

Wklej kod JS bezpośrednio lub przeciągnij plik .js. Bez limitu rozmiaru.

2

Wybierz: minifikuj lub formatuj

Minifikuj dla środowiska produkcyjnego (skraca zmienne, usuwa białe znaki) lub sformatuj zminifikowany JS, aby go odczytać.

3

Skopiuj lub pobierz wynik

Zoptymalizowany JavaScript pojawia się natychmiast. Skopiuj do schowka lub pobierz jako plik.

Masz pytania?

Minifikacja JavaScript usuwa białe znaki, komentarze i znaki nowej linii, skraca nazwy lokalnych zmiennych i funkcji (renaming/mangling) i w niektórych przypadkach eliminuje martwy kod. Wynik jest funkcjonalnie identyczny, ale znacznie mniejszy, skracając czas pobierania i czas parsowania przez silnik JS.

UglifyJS (2010) był pierwszym szeroko stosowanym minifikatorem JavaScript, wprowadzającym kompresję i mangling (zmianę nazw zmiennych). Terser to nowoczesny następca UglifyJS, kompatybilny z ES2015+ i modułami ES. 'Minify' to ogólny termin dla redukcji rozmiaru. Terser jest dziś standardem de facto, stosowanym wewnętrznie przez webpack, Vite, Rollup i esbuild.

Zazwyczaj 40–60% pierwotnego rozmiaru dla dobrze skomentowanego i sformatowanego JavaScriptu. Plik 200 KB można zredukować do 80–120 KB samą minifikacją. W połączeniu z kompresją gzip/Brotli łączne oszczędności mogą przekroczyć 80%. Zmiana nazw zmiennych dodaje dodatkową redukcję o 10–20% poza zwykłym usunięciem białych znaków.

Zminifikowany JavaScript można sformatować, aby odzyskać czytelną strukturę, ale nie można odzyskać zmienionych nazw zmiennych i funkcji: 'calculateMonthlyPayment' mógł stać się 'a' lub 'b'. Bez oryginalnych map źródłowych sformatowany kod jest funkcjonalny, ale trudny do zrozumienia. Mapy źródłowe mapują zminifikowany kod z powrotem do oryginału i są niezbędne do debugowania na produkcji.

Mapy źródłowe to pliki .js.map, które tworzą odpowiedniość między zminifikowanym/transpilowanym kodem a oryginalnym kodem źródłowym. Gdy w produkcji pojawia się błąd, przeglądarka używa mapy źródłowej, aby wyświetlić ślad stosu z oryginalnymi nazwami i numerami linii zamiast wersji zminifikowanej. Są generowane automatycznie przez webpack (devtool: 'source-map'), Vite (build.sourcemap: true) lub Terser (--source-map).

Historia minifikacji JavaScript i optymalizacja pakietu

Minifikacja JavaScript wywodzi się z JSMin, narzędzia stworzonego przez Douglasa Crockforda w 2001 roku. Crockford zauważył, że JavaScript wysyłany do klienta zawierał ogromne ilości białych znaków i komentarzy pochłaniających niepotrzebną przepustowość. JSMin był pierwszym systematycznym kompresorem: usuwał komentarze i białe znaki, zachowując semantykę języka. Wkrótce potem YUI Compressor (Yahoo, 2007) wprowadził podstawowe zmiany nazw zmiennych, kładąc podwaliny pod nowoczesną minifikację.

Tree-shaking to technika pokrewna, ale odrębna: podczas gdy minifikacja redukuje istniejący kod, tree-shaking eliminuje kod, który nigdy nie jest wykonywany (martwy kod), analizując graf importu modułów ES. Rollup spopularyzował tree-shaking w 2015 roku; webpack przyjął go w wersji 2. Podział kodu uzupełnia te techniki, dzieląc pakiet na fragmenty ładowane na żądanie (dynamiczne import()), zmniejszając początkowy JavaScript, który przeglądarka musi parsować i wykonywać.

Narzędzie Lighthouse Google zawiera analizę pokrycia JavaScript (karta Coverage w Chrome DevTools) identyfikującą, jaki procent pobranego JS jest faktycznie wykonywany przy pierwszym załadowaniu. Badania HTTP Archive pokazują, że mediana stron internetowych ładuje ponad 400 KB skompresowanego JavaScript (ponad 1 MB bez kompresji), co czyni go zasobem najbardziej szkodzącym Time to Interactive (TTI). Przyjęcie natywnych ESM w nowoczesnych przeglądarkach i wzorzec modułu importmaps reprezentuje kolejną ewolucję efektywnego dostarczania JavaScript.