In our chat application, we have four key components:
EmojiPicker. However, only three of these components are used instantly on the initial page load:
EmojiPicker isn’t directly visible, and may not even be rendered at all if the user won’t even click on the
Emoji in order to toggle the
EmojiPicker. This would mean that we unnecessarily added the
EmojiPicker module to our initial bundle, which potentially increased the loading time!
In order to solve this, we can dynamically import the
EmojiPicker component. Instead of statically importing it, we’ll only import it when we want to show the
EmojiPicker. An easy way to dynamically import components in React is by using React Suspense. The
React.Suspense component receives the component that should be dynamically loaded, which makes it possible for the
App component can render its contents faster by suspending the import of the
EmojiPicker module! When the user clicks on the emoji, the
EmojiPicker component gets rendered for the first time. The
EmojiPicker component renders a
Suspense component, which receives the lazily imported module: the
EmojiPicker in this case. The
Suspense component accepts a
fallback prop, which receives the component that should get rendered while the suspended component is still loading!
Instead of unnecessarily adding
EmojiPicker 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
fallback 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
1.5MiB, we’ve been able to reduce it to
1.33 MiB by suspending the import of the
In the console, you can see that the
EmojiPicker doesn’t get executed until we’ve toggled the
When building the application, we can see the different bundles that Webpack created.
By dynamically importing the
EmojiPicker component, we managed to reduce the initial bundle size from
1.33 MiB! Although the user may still have to wait a while until the
EmojiPicker 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.
Server-side rendering doesn’t support React Suspense (yet). A good alternative to React Suspense is the
loadable-components library, which can be used in SSR applications.
Similar to React Suspense, we can pass the lazily imported module to the
loadable, which will only import the module once the
EmojiPicker module is being requested! While the module is being loaded, we can render a
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.