bundle-dynamic-imports
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.
How to use
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.
Zamiast tradycyjnego importu (np.
import { MonacoEditor } from './monaco-editor'), użyj funkcjidynamicz pakietunext/dynamic. Opakowaniem komponent wdynamic()i przekaż funkcję, która importuje moduł dynamicznie.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.).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.
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.
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.