How code spliting works and how to use it

First of all, what is code splitting and why should you care

Code splitting is just a way to decrease the initial load time of a page by avoiding loading code that is not needed right away.

Let's say we have a mostly static website that has a button that shows a beautiful graph that is rarely used, the library to build the graph is not needed for the page at all just for the graph, and because the page is mostly static, this library is probably being responsible for most of the page loading time.

It's not optimal to make most of your users wait for something they will never use, but you also don't want to remove the feature because some users do use it.

We solve a problem like this with code splitting

Vanilla code splitting

Before looking into a library that does the job, it's good to understand how it's done, this is a general rule, you going to have a much better time understanding how to use the library if you understand how it's working.

It's pretty obvious how code splitting works server-side, but how does it work on the client-side?

It's actually pretty simple too we just load the additional code when we need it adding a simple script tag to the body of the page, wait for it to load, and use it

The solution to the problem is very simple, We just load the additional code when we need it, we can just add a script tag to the body of the page with the additional code, wait for it to load, and use it

A very simple example would be:

function injectAndCall() {
  let script = document.createElement("script")
  script.src = "js/dynamically-inserted.js"
  document.head.prepend(script)
  console.log('click')
  setTimeout(() => {
    dynamicallyInserted()
  }, 500)
}

In the above example, the dynamically inserted function would live in js/dynamicaly-inserted.js file, the setTimeout is just a hack to give time for the file to load before you call the function.

This is basically what happens when you do code splitting with webpack, webpack splits you code into different bundles and load them when you need them.

Webpack code splitting

The way to do code splitting with webpack is using import(...).then

Different from the default import, you can make imports conditional by using this form

// it doesn't matter where you put this import it will load the file first thing, 
import dynamicallyInserted from './js/dinamically-inserted.js'

Using import().then

import('./js/dinamically-inserted.js').then((module) => {
  module()
})

With import().then webpack will create another file, put all the logic of the module inside this file and only load the file when import() is called, in much the same way that we did it without webpack. webpack was designed to do code splitting and a lot of people don't know it.

Naming the files that will be loaded

Another very useful feature is naming the files that will be loaded, one shortcoming of the other example is that if you have different code that is used together but live in different modules you will have to load two different files to use it, one solution to this is a comment option that webpack lets you define

import(/* webpackChunkName: "dyn-bundle" */ './js/dinamically-inserted.js').then((module) => {
  module()
})

If you name different imports with the same webpackChunkName they'll be bundled together in the same file.

There're other useful options that you can pass to webpack

• webpackMode - how the bundle will be loaded, the options are lazy, lazy-once, eager and weak
• webpackPrefetch - tells the browser this resource will probably be needed in the future
• webpackPreload - tells the browser that the resource might be needed during the current navigation

you can read about all these options and a lot more here:
https://webpack.js.org/api/module-methods/#magic-comments

And that's pretty much it, I hope you have learned something useful, cheers!