, we're going to have our time and month components. There we go. We can save it. After I click the button, we have the current time and the magic number.
Let's take a look into DevTools. You can see that after I refresh the page, whole of our app is downloaded as a single chunk, even though I'm displaying those time and month components, which are quite heavy, only after I click the button.
We can fix this. To fix this, import lazy and Suspense from the newest version of React. We are going to import those two components in a different way. We're going to create a const set to lazy function which takes another function as an argument, which is going to be a dynamic import of the time component.
We're going to do exactly the same for month. Remove those two imports and wrap those two heavy components inside of a Suspense component. You also need to provide a fallback. Fallback is a piece of JSX which is going to be displayed whenever those two components are being loaded. In this case, it's going to be a header which says "Loading."
I'm going to refresh this page. You're going to notice that the first chunk is actually a bit smaller. Those two heavy components are loaded only after I click the button. They are over here. This happens because the Suspense component uses lazy dynamic import to download those two heavy time and month components only after I click the button and not before.