Reduce Your Bundle Size In 5 Steps 😎

Why the hell should I care about my bundle size?

Well, as web application developers we want our users to have the most convenient experience when visiting our site. An integral part of it is the time they wait until the site is being loaded. The difference in the attitude of a user that got the website after 3 seconds, and a user that got it after 10 seconds is a big thing. As Bitcatcha phrased it:

Website speed is the first impression you ever make

Hence, if there are some small simple steps we can do to make our users love our website more, we should do them with no doubts!

How can I find out what is my current bundle size?

There are many webpack bundle analysis tools, my favorite one is:

webpack-bundle-analyzer

It is very easy to set up and analyse what are the major dependencies that increase your bundle size. With that analysis you will be able to understand which packages or dependencies you should try to reduce/remove.

webpack bundle analyzer

Ok you convinced me! What should I do?

I am very glad you now appreciate the importance of a small bundle size and want to know the way to reduce yours. I can promise you it will be small steps that can make a substantial difference. But in the same breath, not all the steps can fit to your specific project. While you are applying those steps you have to be aware that it might cause some unwanted behaviour. Of course you can apply only to those that fit.

1. Tree Shaking

Tree shaking is the operation of removing unused modules in our code, so the “dead code” won’t be included in the bundle during the build process. This operation may have a big impact on our bundle size, and if you are using webpack and ES6 it is very easy to apply it!

es6 module

ES6 gave us the “import” syntax, which provide us the option to make our modules static. That allows webpack to determine which modules are needed before the code runs.

And that’s all you need to do basically, cool ah? When your code runs in production you won’t get all the unused modules in your bundle. In addition, make sure you don’t import entire modules but only specific ones.

2. Reduce Lodash

Almost every project out there uses Lodash, it is a very common utilities library and has almost 33M weekly downloads. The full size of Lodash is ~75kb, the way you import Lodash functions can make a big difference in your bundle size.

In order to achieve the minimal size of Lodash, you will need to use two simple plugins:

• babel-plugin-lodash - Which is a plugin for babel that transform you babel import to only bring the specific module you need.

lodash-webpack-plugin - Lodash provide many edge cases functionality, which in most cases we don’t use. This plugin reduce Lodash size by removing these functionality, this is why you have to make sure it doesn't break you code! You can configure which features of Lodash you want to disable.

3. Switch to ‘Preact’

This one is very simple and effective! If you are using React in your project, you can easily switch it to use Preact, which is only 3kb weight. It is mostly compatible with React.

• Install Preact

npm i preact react-compat

Aliasing Preact

// in webpack.config.js
...
{
  "resolve": {
    "alias": {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  }
}

And that’s it.

Of course as always, you need to check you didn't break anything.

4. Remove unused pollyfills

As time passes- technology improves. That is what you need to keep in mind every once in a while when you use pollyfills. In my company, we used pollyfills to support very old browsers. By the time we decided to support only recent versions of browsers, we forgot to remove the unused pollyfills which are pretty big. With that thought, go to your code and decide which platforms and browsers you want to support and remove all the polyfills you don’t need.

You can do it with babel-preset-env, but personally in this case I preferred to do it manually and import from core-js the specific functionality that I needed. core-js is a polyfill of the JavaScript standard library and with that you can easily choose to load only the features you will be using.

Import only what you use

5. Use code splitting

As your application grows, there will be some features that are less frequently used, or which are not immediately necessary. With that in mind — wouldn’t it be good to only load the code you need, when you need it?

Webpack gives you the option to split your code into different chunks, in that way you can dynamically import your code whenever you need it - on demand.

For further reading and implementation → Webpack Code Splitting.

Summary

In my company we had to improve the load time of our application. With the information and methods I wrote here, I was able to reduce our bundle size by almost 30%. I tried to give you fast, easy and effective steps to reduce the size of your bundle, which will result in higher performance.

As the steps are pretty easy to implement, always do a double check that everything is working as expected.

Hope you enjoyed reading 😎