Code splitting is one of the most compelling features of webpack and almost modern bundler tools. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel.

We have cool story behind webpack history and code-splitting feature: Before webpack was born we have project named as modules-webmake.

Tobias Koppers a.k.a founder of webpack wanted Code Splitting for modules-webmake so webpack was born. Interestingly the Code Splitting issue is still open.

We have some approaches to code splitting:

1. Eager loading

For instance, we mouseOver or focus the <label> for the something, we should kick off a dynamic import. As import() returns a promise, it can be used with async functions. Here’s how it would simplify the code:

const myModlule = await import('./path-to-module')

It doesn’t matter how many times you call import('./path-to-module'), webpack will only actually load the module once.

2. Prefetching modules

If you’re using webpack to bundle your application, then you can use webpack magic comments to have webpack instruct the browser to prefetch dynamic imports:

import(/* webpackPrefetch: true */ './some-module.js')

When webpack sees this comment, it adds this to your document’s head:

<link rel="prefetch" as="script" href="/static/js/1.chunk.js">

With this, the browser will automatically load this JavaScript file into the browser cache so it’s ready ahead of time.

The change itself is minimal, but pull up the DevTools to make sure it’s loading properly (you’ll need to uncheck the “Disable cache” button to observe any changes).

FYI

One great way to analyze your app to determine the need/benefit of code splitting for a certain feature/page/interaction, is to use the “Coverage” feature of the developer tools.

Notes

The webpackChunkName magic comment which will allow webpack to place common modules in the same chunk. This is good for components which you want loaded together in the same chunk (to reduce multiple requests for multiple modules which will likely be needed together).

Reference:

Webpack - Code Splitting
Webpack - Lazy Loading
React - Code Splitting
Code splitting with dynamic imports in Next.js
Route-level code splitting in Angular
Vue - Lazy Loading Routes