Dynamic Import
In our chat application, we have four key components:
,
,
and
. However, only
three of these components are used instantly on the initial page load:
,
and
. The
isn't directly visible, and may not even be rendered at all if the user won't even click on the
in order to toggle the
. This would mean that we unnecessarily added the
module to our initial bundle, which potentially increased the loading time!
In order to solve this, we can
dynamically import the
component. Instead of statically importing it, we'll only import it when we want to show the
. An easy way to dynamically import components in React is by using
React Suspense. The
component receives the component that should be dynamically loaded, which makes it possible for the
component to render its contents faster by suspending the import of the
module!
When to Use
- Use this when certain modules are only needed based on user interaction or conditions
- This is helpful when you want to reduce the initial bundle size for faster page loads
- Use this when components like modals, pickers, or heavy libraries aren't needed on initial render
Instructions
- Use with for dynamic component imports in React
- Provide meaningful fallback UI while dynamically imported modules are loading
- Consider using for SSR applications where React Suspense isn't supported
- Only dynamically import modules that aren't critical to the initial render
Details
Instead of unnecessarily adding
to the initial bundle, we can split it up into its own bundle and reduce the size of the initial bundle!
A smaller initial bundle size means a faster initial load: the user doesn't have to stare at a blank loading screen for as long. The
component lets the user know that our application hasn't frozen: they simply need to wait a little while for the module to be processed and executed.
Asset Size Chunks Chunk Names
emoji-picker.bundle.js 1.48 KiB 1 [emitted] emoji-picker
main.bundle.js 1.33 MiB main [emitted] main
vendors~emoji-picker.bundle.js 171 KiB 2 [emitted] vendors~emoji-picker
Whereas previously the initial bundle was
, we've been able to reduce it to
by suspending the import of the
!
By dynamically importing the
component, we managed to reduce the initial bundle size from
to
! Although the user may still have to wait a while until the
has been fully loaded, we have improved the user experience by making sure the application is rendered and interactive while the user waits for the component to load.
Loadable Components
Server-side rendering doesn't support React Suspense (yet). A good alternative to React Suspense is the
library, which can be used in SSR applications.
Similar to React Suspense, we can pass the lazily imported module to the
, which will only import the module once the
module is being requested! While the module is being loaded, we can render a
component.
Although loadable components are a great alternative to React Suspense for SSR applications, they're also useful in CSR applications in order to suspend the import of modules.
Source