bundle-dynamic-imports

Umożliwia dynamiczne importowanie dużych komponentów (edytory, wykresy, edytory tekstu) tylko wtedy, gdy są rzeczywiście potrzebne. Zamiast ładować je razem z głównym pakietem aplikacji, czekasz aż użytkownik je faktycznie wyświetli. Dzięki temu zmniejszasz rozmiar początkowego bundle'a nawet o kilkaset kilobajtów i przyspieszasz ładowanie strony.

1. Zidentyfikuj w swoim projekcie Next.js komponenty, które są ciężkie i ładują się na żądanie — typowe przykłady to edytory kodu (Monaco), biblioteki do rysowania wykresów czy zaawansowane edytory tekstu. Sprawdź, czy naprawdę są potrzebne podczas pierwszego renderowania strony.

2. Zamiast tradycyjnego importu (np. import { MonacoEditor } from './monaco-editor'), użyj funkcji dynamic z pakietu next/dynamic. Opakowaniem komponent w dynamic() i przekaż funkcję, która importuje moduł dynamicznie.

3. W opcjach dynamic() ustaw { ssr: false }, aby zapobiec renderowaniu komponentu na serwerze. To jest ważne dla komponentów, które wymagają dostępu do API przeglądarki (DOM, window itp.).

4. Użyj komponentu w swoim kodzie dokładnie tak samo jak wcześniej — nie musisz zmieniać logiki renderowania. Różnica jest całkowicie przezroczysta dla reszty aplikacji.

5. Przetestuj aplikację i sprawdź w narzędziach deweloperskich (DevTools), że bundle główny jest mniejszy, a komponent ładuje się dopiero gdy go wyświetlisz. Możesz zobaczyć nowy chunk w zakładce Network.

6. Powtórz ten proces dla każdego innego ciężkiego komponentu, który nie jest wymagany na starcie — każdy dynamiczny import zmniejszy rozmiar głównego bundle'a i przyspieszy ładowanie aplikacji.