Using Webpack Code Splitting

In this tutorial we're going to investigate a webpack feature called code splitting.

Code splitting will allow you to reduce the size of your main JavaScript file by splitting it up into different files and lazy load these as and when they're required.

This is a very important feature when building a single page application as your JavaScript file could be very large, this means that your page will need to wait for this to downloaded before the page can be started.

Using code splitting you can split up your code into multiple files and only download the files your app needs to display the page. For example if you only use a component on a single page you don't need to load in that component on every page of your app, using code splitting Webpack can lazy load in that component only when it is needed.

To be able to load in script dynamically you'll need to use the Javascript feature of import but not the keyword as this is static, the function import().

First you'll need to install a babel plugin for dynamic import.

npm install babel-plugin-syntax-dynamic-import --save-dev

When this is installed you'll need to add a .babelrc file to the root of your project and add the following config.

Prefetch A Module

If you have a component that you're going to lazy load into your app, you can speed up browser processing by telling it to prefetch this file.

For example let's say you have a Login button that will pop-up with a Login modal, this Login modal could be in it's own component file and you can code split it out using the abve technique. When you define the action for the login modal you'll have it inside the login button component and import the login modal.

Using a webpack comment annotation you can tell webpack to prefetch this by using the following code.

import(/* webpackPrefetch: true */ "LoginModal");

Webpack will then automatically append <link rel="prefetch" href="login-modal.js"> into the head of the page which will tell the browser to prefetch this script as it will be needed if the user clicks on the login button.

Now you can use this functionality in your project to split up the code and automatically lazy load these components only when they're needed.