Code Splitting and Dynamic Imports
When it comes to large web apps, code organisation is important. It helps to create performant and easier to understand code. One of the simplest strategies that can be used to aid with this is code splitting. With tools like Webpack the ways that you can split your code into smaller parts are simple. They fall into two distinct strategies, static and dynamic.
With static code splitting we start by listing out each distinct part of our app as a given entry point. This allows for Webpack to split out each entry point into separate bundles at build time. This is perfect if we know which parts of our app will be viewed the most.
The dynamic approach uses Webpack’s implementation of the import method to load our code. As the import method returns a promise, you can handle the injection of your code using async await.
Although this is a pretty contrived example, you can see how simple an approach this is. By using Webpack to do the heavy lifting, we can split our app into distinct modules. These can then load when the user hits a given part of our app.
If we combine this approach with the control structures provided to us by React, we get code splitting with lazy loading. This allows us to defer the loading of our code until the last possible minute thereby reducing the initial page loads.
Using React to handle lazy loading
For arguments sake, let’s call the piece of code that we want to load a module.
In order to import our module, we need to decide what API if should have. Given that we’re using React to render our content, let’s start with that.
Here’s a simple API for exporting our modules component, using the view namespace.
Now given that we’re using the import method to load this file, we can easily access the module’s view component e.g
However, we’re still not using React’s control structures to allow us to load our module lazily. Let’s go ahead and do this by creating a LazyLoadModule component. This component will be responsible for resolving and rendering a given module’s view component.
Here’s how we’d then use the LazyLoadModule component to load our module’s view.
Here’s a live example with a little extra error handling thrown in.
By using React to handle the loading of each module, we can lazily load in components at any point with our app. This includes nested modules.
With Redux
So far, so good. We’ve demonstrated how we can load our app’s modules dynamically. Yet we still need to get the right data into our modules as they load.
Let’s look at how we can hook up our redux store to our modules. We already create an API for each module by exposing the view component of each module. We can expand on this by exposing each module’s reducers. We’ll also need to expose a name under which our module’s state will live within the app’s store.
The above example demonstrates how our module will get the state it needs to render.
But we need to do a more little work on our store first. We need to be able to register our module’s reducers at the point at which they load. So that when our module dispatches an action, our app’s store gets updated. We can do this by using the replaceReducer method.
First we will need to add 2 extra methods, registerDynamicModule and unregisterDynamicModule to our store.
As you can see, the code itself is pretty simple. We’re adding our two new methods to our store. Each of those methods then completely replaces the reducers within our store.
Here’s how we can then create our augmented store:
Next, we need to update our LazyLoadModule so that it can register our module’s reducers with our store.
We could pass the store in via props. This is easy, but it means that we would have to retrieve our store each time, which can lead to bugs. With that in mind, let’s leave it to the LazyLoadModule component to get the app’s store for us.
As the react-redux <Provider /> component adds the store into the context, we only need to retrieve it within the LazyLoadModule using contextTypes.
We can now access our app store from any instance of our LazyLoadModule. The only remaining part is to register our modules reducers with our store. Remember that we’re exporting each module like so :
Let’s update the componentDidMount and componentWillUnmount methods of our LazyLoadModule to register and unregister each module:
Here’s our final working example.
Conclusion
By making use of Webpack’s dynamic imports we’re able to add code splitting to our app. This means that each part of our app can register it’s own components and reducers, which will load on demand. Additionally we reduce bundle size and load time. This means that each module can be thought of as a separate app.
If you want to try this out in your own project, here’s a little library that I’ve written to accompany this article. It does every thing set-out above.
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
