Pojęcie tree shaking. Kojarzycie? Jeśli gdzieś Wam dzwoni, ale nie wiecie, w którym kościele – zapraszam do lektury
Tree shaking to technika kompilacji, której celem jest redukcja rozmiaru skompilowanej paczki kodu JS.
Jak to działa?
Mechanizm polega na tym, że podczas kompilacji dany kod jest analizowany, a następnie budowane jest drzewko zależności (dependency tree). To ono wskazuje, jakie importowane moduły, funkcje są rzeczywiście potrzebne. Tylko one trafiają do wynikowej, skompilowanej paczki. Nie znajdziesz tam nadmiarowego, nieużywanego kodu.
Kiedy tree shaking w szczególności może się przydać?
Wtedy, kiedy importujesz wiele zewnętrznych bibliotek, jednak korzystasz jedynie z ułamka ich możliwości. W szczególności, jeśli są to skomplikowane, duże, ciężkie kombajny. Dzięki tree shaking wynikowy kod JS będzie zawierał tylko to, co rzeczywiście jest niezbędne do działania Twojej aplikacji. Nie znajdą się tam dodatkowe, niepotrzebne fajerwerki, jakie udostępniają importowane biblioteki, ale z których nie korzystasz. Nadmiarowy kod tylko zajmuje transfer i obciąża dodatkowo przeglądarkę.
Przykład: Chcesz użyć lodash, ale interesuje Cię tylko kilka matematycznych funkcji. Inny przykład – kiedy korzystałeś z całego arsenału możliwości jQuery? No właśnie.
Jak mogę skorzystać z tree shaking?
Cały mechanizm bazuje na modułach ES6. Dalej – znajdziemy go w takich narzędziach jak bundlery Rollup, czy Webpack 2.
Jesteś głodny dodatkowej wiedzy?
Klikaj:
