Code-splitting with dynamic import — Test and Learn

Understanding how dynamic import works from a simple demo application

Photo by Fancycrave on Unsplash

Code-splitting and dynamic import are one of the compelling features of bundling tool like Webpack, Parcel, and Bazel.

With these features, you can split your code into small chunks then be loaded on demand only when it’s needed. This can improve the page load time of your application.

But have you ever wondered what will be your chunks looks from actual build? What will happen if the application uses dynamic import from chunks that imported dynamically? Will my code be split as a chunk when it’s dynamically imported but not from others? I was also curious about these scenarios, therefore I decided to build a simple application and test them out.

Application diagram

All of the characters are from Resident Evil.

First, we are creating multiple routes using characters from Resident evil — one of the most famous video game franchise. Each character has own inventory slot and two weapons are pre-loaded. Everyone is using the same knife but the projectile is different.

Building the demo application

To build this demo, we are using Webpack v4, React, and React-loadable for loading component with dynamic import.

The source code is available from Github.