Hello

I'm Alejandro

A Web Engineer from Málaga, Spain based in London, UK

Code splitting

We live in a world where there are plenty of devices. They have different sizes, memory, cpu or even screen resolutions. Some are faster than others. But they all have something in common, they want to access the web and they want to do it everywhere. At home or outside, your users don't realise we are wasting their time or their own 3G/4G connection without even noticing.

Nowadays, we are used to quick Internet connections, our mind just doesn't respond for a slow one. We want to access the content we are looking for, and we want to do it right now.

There are a lot of obstacles when you might want to access a website. Maybe your smartphone is just really old, or your computer is frozen because something else is going on in the background, or you live in a country where internet connection is not so good.

These are classic examples of people trying to access your website. But you know what? Internet is for everyone, and everyone should be able to have access that shiny website you just released.

We need to build a fast and smooth experience on any device in any condition.

Make your website light

You have probably heard about Code splitting once or twice. But you are not sure how to approach it. Maybe you are not sure how to know if you should start code splitting or just don't know what this is all about.

Code splitting allows you to split your code into various bundles or chunks, which can be loaded on demand or in parallel. It can be used to achieve smaller bundles or prioritize the load of your assets, which turns out it can have a really good impact on the time your website loads.

Where do I start?

My advice is you should think. How many features of your website are not having any impact on the user on the first load? Probably many right? Those you should code split.

Dynamic imports are a thing since 2017, when the V8 team at Google released them. And they look like this:

import('../path/to/your/code.js')

You are probably already use to the rule, imports must always go at the beginning of the file. Well... this will not be a thing anymore.

Dynamic imports can be anywhere on your code. They will load more code, that you can use to load more and so on. They have endless capabilities.

See it in action

An example will be, you want a popup to appear in your website when users click on a "More information" button. Do users care about that popup at the time they are loading your page? Most likely not. They will care about it only when they are interested in more information.

Let's see it in code.

// index.js

const button = document.querySelector('#more-info-button')

function showMoreInfo() {
  import('./popup.js').then((popup) => {
    popup.show()
  })
}

button.addEventListener('click', showMoreInfo)
// popup.js

export function show() {
  // code to show your popup
}

export function close() {
  // code to close your popup
}

Notice, the way you export your code, is how you will use it. Just like when using static exports.

When you put this together, and watch the "Network" tab of your developer tools, you should see the code for popup loading only and exclusively when you click the "More Information" button. Isn't that great?

With this mechanism, we are making sure that nothing but what you are seeing, load on the first load of the page.

This concept will become more and more important when your application starts to grow.

Am I done?

Probably not. But how do you know?

The Chrome team has put together an incredible tool in the developer tools. It's called "Coverage" and it will tell you:

  • The amount of code you are loading.
  • How much of that code is used.
  • How much of that code is not used.

But not only that, it will keep recording your website while interacting with it, and it will update accordingly.

To start using it, open your developer tools, click on the three-dot menu > More Tools > Coverage.

Now hit the reload button inside the tool.

Coverage tool chrome

Surprise! More than half of your code is not being used on the first load. Here is when you will have to figure out where to code split the code of your application.

Conclusion

Using this technique, we can ensure our website loads as fast as it can be. Only loading the code that we need, also ensure users are not wasting their money on loading your website. So:

  • Code split the obvious.
  • Check out the Coverage tab in dev-tools.
  • Checkout lighthouse when you finish the two above for insights on how fast your website is and how you could improve it.
  • Make your users happy.
Share this post