Dynamic Import
Import parts of your code on demand
Overview
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.
The 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.
Implementation
In React, we can dynamically load a component by using React.Suspense
with React.lazy
.
The Suspense
component receives a fallback
, that gets rendered while the client is fetching the SearchPopup
bundle.
In this example, Card1
and Card2
are statically imported and included in the initial bundle. Card3
and Card4
however are dynamically loaded on user interaction.
Tradeoffs
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.