Import parts of your code on demand
Statically imported modules are all included in the final bundle of our app, even components that don't need to be rendered right away. Depending on the size of the components and the final bundle, this could lead to a worse initial loading experience, as the client has to download and parse the entire bundle.
In many cases, we can defer the import of modules until they're actually needed, which results in smaller bundles.
Let's say for example that we have a
Search input component. When a user clicks on the search input, we show a
SearchPopup component that shows some popular locations.
SearchPopup component isn't instantly visible on the screen - or maybe won't even be visible at all if the user never clicks on the
SearchInput. We can dynamically import the
SearchPopUp component, which separates this code from the initial bundle, and creates a separate bundle for just this component.
In React, we can dynamically load a component by using
Suspense component receives a
fallback, that gets rendered while the client is fetching the
In this example,
Card2 are statically imported and included in the initial bundle.
Card4 however are dynamically loaded on user interaction.
Faster initial load: Dynamically importing modules reduces the initial bundle size - allowing for a smaller initial load since the client doesn't have to download and execute as much, saving bandwidth.
Layout shift: A layout shift can occur if your fallback component and the component that eventually gets rendered differ a lot in size.
User experience: If you're lazy-loading a component that's needed for the initial render, it may unnecessarily result in longer loading times. Try to only lazy load components that aren't visible on the initial render.