Minifikacja to proces usuwania z kodu źródłowego wszystkiego, co jest potrzebne tobie jako programiście, ale kompletnie zbędne dla przeglądarki: spacji, tabulatorów, znaków nowej linii, komentarzy, a często też skracania nazw zmiennych. Efekt? Plik waży mniej, szybciej leci po sieci i szybciej się parsuje, a działa dokładnie tak samo jak przed obróbką. Minifikuje się głównie pliki JavaScript, CSS i HTML.
Sens jest prosty: kod, który piszesz, ma być czytelny dla człowieka. Wcięcia, puste linie i komentarze typu // tu była magia, nie ruszać pomagają w utrzymaniu projektu, ale przeglądarce są obojętne. Im mniej bajtów trzeba pobrać i przetworzyć, tym szybciej strona się ładuje, co realnie wpływa na Core Web Vitals i wrażenia użytkownika na wolnym łączu.
W praktyce minifikacji prawie nigdy nie robisz ręcznie. Robi to narzędzie w procesie budowania. Dla JavaScriptu standardem jest dziś Terser (następca starego UglifyJS), dla CSS popularny jest cssnano, a bundlery takie jak esbuild, Vite czy webpack mają minifikację wbudowaną i włączoną automatycznie w trybie produkcyjnym. Najprostszy przykład z linii poleceń:
npx terser app.js -o app.min.js --compress --mangle
Flaga --compress wyrzuca martwy kod i upraszcza wyrażenia, a --mangle skraca nazwy lokalnych zmiennych (np. userCounter robi się a). Plik z końcówką .min.js to umowna konwencja oznaczająca wersję zminifikowaną.
Na co uważać
Częsty mit: minifikacja psuje kod. Sama w sobie nie psuje, ale --mangle potrafi namieszać, jeśli twój kod polega na nazwach zmiennych w czasie działania (refleksja, frameworki czytające nazwy parametrów). Drugi błąd to brak source map na produkcji. Debugowanie zminifikowanego pliku, gdzie cały skrypt to jedna linia z literkami a, b, c, to droga przez mękę. Wygeneruj .map, a w narzędziach deweloperskich zobaczysz oryginalny kod.
I nie myl pojęć. Minifikacja to czyszczenie znaków, kompresja (np. gzip czy Brotli) to pakowanie pliku po stronie serwera, a uglifikacja kładzie nacisk na utrudnienie czytania (mangling). Te techniki działają razem, nie zamiast siebie. Najpierw minifikujesz, potem serwer dorzuca kompresję w locie.
Pojęcia powiązane: bundling, tree shaking, source maps, kompresja gzip/Brotli, transpilacja (Babel), Terser, cssnano, esbuild, Webpack, Vite, Core Web Vitals.