Optimize Webpack bundle size for your frontend project.

Nowadays, ReactJS and all of the SPA frameworks get a bad rap for their heavy bundle size, even for their small app.

Moreover, we are not making web-apps for desktop users, 90% traffic of our website comes from mobile devices. It’s important to reduce the bundle size for our app to make it loads.

Here are something you can do to reduce the Webpack bundle size of your app. 

Drop support for old browsers

Recently, Microsoft Team has dropped the support for IE11. There is a lot of benefits when you decide to drop support for old browsers:

  • We don’t need to convert your ES6 code to ES5 anymore. Since ES6 code tends to be shorter than ES5, your bundle size will be reduced too.
  • We don’t have to ship polyfills. Most of the polyfills are huge.

Code splitting (lazy-loading)

When Webpack bundles our code, it merges every file and module into a single huge file. Inject this bundle to HTML will load the entire of our app.

But usually, we don’t need to load the entire of our app at once. We can split it into smaller chunks, these chunks should be transferred to the user’s browser when they actually need it. Doing this will dramatically reduce our initial bundle size and user can use our app faster.

The code splitting is well documented on React team here: https://reactjs.org/docs/code-splitting.html. Personally, I think we don’t need to apply lazy loading to every single component, doing cause more harm to user experience since our users always have to wait for a millisecond to see the component. Lazy loading component by route is enough. 

Use libraries which support tree shaking

Tree shaking is a process that removes dead-code from your bundle. When you use a non-tree-shaking library, you are putting the whole library into our bundle, although you just import a small part of their library. There are some alternative libraries that support tree shaking. For example, react-window and react-virtualized do the same things and developed by the same author, but the first one is not only smaller but also supports tree-shaking. 

Other libraries that don’t support tree-shaking are lodash and momentjs.

With lodash, you should import specific method one by one

//incorrect
import lodash from 'lodash';
import { merge } from 'lodash';

//correct
import merge from 'lodash/merge';
import each from 'lodash/each';

However, if you decide to support modern browsers, you can replace lodash with ES6 implementation here: https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore

With momentjs, there are several options include dayjs, luxon, datefns. Lightbox on Google Chrome also advises us using these libraries.

Analyze your Webpack stats

Webpack provides an option to generate bundle information in a JSON file. This file gives us information on what was bundled and the size of each module. 

Since this is a JSON that is hard for us to visualize, we can use this plugin to generate a nicer HTML report chart.

Thanks for reading my article.