Minifikację JavaScriptu często myli się z obfuskacją, choć to dwa różne zadania z różnymi celami: jedno oszczędza bajty, drugie utrudnia zrozumienie logiki kodu.
Co robi minifikacja
Minifikator usuwa białe znaki, komentarze i podziały linii, a także skraca nazwy zmiennych lokalnych do jednego lub dwóch znaków tam, gdzie jest to bezpieczne. Logika programu pozostaje przy tym całkowicie niezmieniona — to czysto techniczna kompresja pliku.
Od JSMin do Terser: krótka historia
Douglas Crockford opublikował JSMin na początku lat 2000., jeden z pierwszych szeroko stosowanych minifikatorów JS — narzędzie to usuwało wyłącznie białe znaki i komentarze, nie ruszając nazw zmiennych. Nowoczesne narzędzia, takie jak Terser (fork UglifyJS) czy esbuild, idą dalej: parsują kod do drzewa AST (abstract syntax tree) i zmieniają nazwy zmiennych lokalnych oraz parametrów funkcji na pojedyncze litery wszędzie tam, gdzie jest to bezpieczne — i to właśnie ten krok, a nie samo usunięcie białych znaków, daje największy zysk w rozmiarze pliku w realnych projektach.
Source mapy: jak debugować kod z przemianowanymi zmiennymi
Gdy nazwy zmiennych zostają skrócone do a, b i c, a wszystkie podziały linii znikają, stack trace błędu na produkcji wskazuje na nieczytelną pozycję w jednej, bardzo długiej linii. Source mapa rozwiązuje ten problem — to osobny plik mapujący każdą pozycję w zminifikowanym kodzie z powrotem na oryginalną linię, kolumnę i nazwę zmiennej, dzięki czemu DevTools przeglądarki może pokazać czytelny stack trace, mimo że przeglądarka faktycznie wykonuje zminifikowany plik.
Do czego się to przydaje
- Zmniejszenie rozmiaru bundla JS przed wdrożeniem na produkcję.
- Przyspieszenie pobierania i parsowania skryptu w przeglądarce.
- Zrozumienie, dlaczego zminifikowany kod wciąż da się odczytać, a zobfuskowany jest znacznie trudniejszy do rozszyfrowania.
Tree shaking a minifikacja
Tree shaking to osobna technika, której nie należy mylić z minifikacją: analizuje graf zależności między modułami i już na etapie budowania całkowicie usuwa z finalnego bundla funkcje oraz eksporty, które nigdzie nie są używane. Minifikacja z kolei działa na już gotowym kodzie i jedynie skraca jego zapis tekstowy, nie usuwając żadnej faktycznie wykorzystywanej logiki. Nowoczesne bundlery, takie jak Vite czy webpack, zwykle stosują obie techniki po kolei: najpierw tree shaking usuwa martwy kod, a potem minifikacja kompresuje to, co zostało.