3 ways to reduce webpack bundle size
You build your webpack app and see this WARNING in the console:
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: bundle.js (497 KiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (497 KiB) bundle.js
You want to follow the recommendation and keep your bundle size small. But how do you do it?
Go through these three steps to get a quick overview of what to do to reduce webpack bundle size. I have listed them with increasing difficulty so that you can start at the top and hopefully get a quick win and then you can work your way down.
Make sure you run webpack in production mode. Run webpack with the
--mode production flag, like this:
webpack --mode production
This little flag does these two things to optimize your bundle size:
Enable minification using TerserPlugin. It removes unnecessary white spaces, new lines, unreachable code, etc.
production. This tells some packages, like React, to not include debug code.
There are many good tools to analyze your bundle. The best ones I have used are these two:
They work a bit differently but the output is the same: A nice visual representation of all the modules in your bundle. The output from source-map-explorer looks like this (image from the GitHub repo):
This visualization makes it possible for you to get a really nice overview of what is in your bundle. You can also compare sizes of components and dependencies.
How to analyze the output:
- Are some dependencies larger than you thought? Could you replace them with a minimalistic or more specialized alternative or rewrite it yourself?
- Are you using moment.js and have all timezones in the bundle, but are only using one or two? Here is how to fix it.
- Are you using lodash? Then consider using lodash-webpack-plugin and/or babel-plugin-lodash
- Would it make sense to split the bundle up, so that not every component and dependency is loaded on every page? Then continue reading :)
Code splitting means to split your bundle into smaller bundles.
Now you might ask yourself “Why would anyone want to do that? Isn’t that bad for mobile?”. It’s true that you want to reduce the number of new HTTP connections to increase performance on mobile. But the advantage to using code splitting is you can use more of browser cache and have more specialized bundles.
Your dependencies usually do not change as often as your production code. With code splitting, you can split your dependencies into a separate bundle. This bundle can be cached by your user’s browser for longer periods than your production code bundle.
Check out this guide How to extract the CSS to its own styles.css file if you are interested learning more.
This guide is really good to learn how to get started.
In this article, I have gone through the most basic things you can do for reducing the webpack bundle size.
Do you want to go even further in your optimizations and get a more in-depth knowledge? I have created a PDF guide that you can access by signing up below.