Koncepcje bundlowania: tree shaking i code splitting
Proszę zrozumieć, jak bundlery usuwają nieużywane eksporty za pomocą tree shaking oraz dzielą wynik na fragmenty, aby przyspieszyć początkowe ładowanie strony.
Koncepcje bundlowania: tree shaking i code splitting to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co robi bundler
Bundler (Vite, webpack, Rollup, Parcel) odczytuje pliki źródłowe, rozwiązuje importy, przekształca kod (transpiluje, minimalizuje i optymalizuje), a następnie generuje pliki, które przeglądarka może efektywnie załadować.
Graf modułów
Bundler rozpoczyna od punktu wejścia i podąża za każdym importem, aby zbudować graf modułów — kompletną mapę całego kodu używanego przez aplikację. Ten graf stanowi podstawę wszystkich optymalizacji.
Tree shaking — eliminowanie martwego kodu
Tree shaking analizuje graf modułów i usuwa eksporty, które nigdy nie są importowane. Tylko statyczne importy modułów ES umożliwiają tree shaking — CommonJS require() jest dynamiczne i nie może być analizowane statycznie.
// utils.js
export const add = (a, b) => a + b; // used → included
export const multiply = (a, b) => a * b; // never imported → removed
// app.js
import { add } from './utils.js';
console.log(add(2, 3));Efekty uboczne i sideEffects: false
Jeśli biblioteka nie ma efektów ubocznych (czyste ponowne eksporty), należy dodać "sideEffects": false do package.json. Informuje to bundlery, że mogą bezpiecznie usunąć z pakietu każdy nieimportowany plik.
// package.json of a library:
{
"sideEffects": false
// or list files with side effects:
"sideEffects": ["./src/polyfills.js"]
}Dzielenie kodu
Dzielenie kodu rozbija bundle na wiele ładowanych na żądanie chunków. Główny chunk pozostaje mały, co przyspiesza początkowe ładowanie. Dodatkowe chunki są ładowane tylko wtedy, gdy są potrzebne (trasy ładowane leniwie, przełączniki funkcji).
Dzielenie według punktów wejścia
Aplikacje wielostronicowe mają wiele punktów wejścia, z których każdy tworzy własny bundle. Wspólny kod (np. React) jest automatycznie wydzielany do wspólnego chunka.
Dzielenie według dynamicznych importów
Każde wywołanie dynamicznego import() tworzy punkt podziału. Bundler generuje osobny chunk dla ładowanego leniwie modułu i wszystkich jego unikatowych zależności.
// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));Dzielenie kodu dostawcy
Kod z Node_modules rzadko się zmienia. Należy wydzielić go do chunka dostawcy z długim czasem przechowywania w pamięci podręcznej. Użytkownicy, którzy mają zapisany w pamięci podręcznej chunk dostawcy, przy aktualizacjach pobierają ponownie tylko chunk aplikacji.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}Minimalizacja
Minifikatory (esbuild, terser) usuwają białe znaki, zmieniają nazwy zmiennych na jednoliterowe i stosują inne redukcje. Typowa aplikacja React zmniejsza się o 60–70% po minimalizacji.
Haszowanie na podstawie zawartości
Bundlery dodają do nazwy pliku hash jego zawartości: index-a1b2c3.js. Gdy zawartość się zmienia, zmienia się hash, zmienia się nazwa pliku, a przeglądarka pobiera nowy plik. Niezmienione chunki są przechowywane w pamięci podręcznej bezterminowo.
Mapy źródeł
Mapy źródeł odwzorowują zminimalizowany wynik z powrotem na oryginalny kod źródłowy. Są generowane osobno (nie są wysyłane użytkownikom) i używane przez DevTools do debugowania. Należy włączyć je za pomocą build.sourcemap: true.
Szybki test
Jaki jest podstawowy wymóg działania tree shaking?
Podsumowanie: koncepcje bundlowania
Bundlery rozwiązują graf modułów, wykonują tree shaking nieużywanych eksportów (wymaga to statycznego ESM), dzielą kod na chunki ładowane leniwie, wydzielają kod dostawcy na potrzeby buforowania, minimalizują wynik i dodają hashe zawartości, aby unieważniać pamięć podręczną. Mapy źródeł umożliwiają debugowanie zminimalizowanego kodu.
Często zadawane pytania
Czy lekcja „Koncepcje bundlowania: tree shaking i code splitting” jest bezpłatna?
Tak — pełny tekst „Koncepcje bundlowania: tree shaking i code splitting” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Koncepcje bundlowania: tree shaking i code splitting”?
Proszę zrozumieć, jak bundlery usuwają nieużywane eksporty za pomocą tree shaking oraz dzielą wynik na fragmenty, aby przyspieszyć początkowe ładowanie strony. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Koncepcje bundlowania: tree shaking i code splitting”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Moduły ES: import, export i dynamic import
- npm i package.json: zależności i skrypty
- Vite: serwer deweloperski i build
- Koncepcje bundlowania: tree shaking i code splitting