Five Steps to Reduce webpack 4 Bundle Size

How to optimize your application’s size

Gapur Kassym
Nov 6, 2019 · 4 min read
Image for post
Image for post
Photo by René Porter on Unsplash

I have done several projects on React with Material-UI and Ant Design. Material-UI is a great set of React components with which to develop web applications. Ant Design is an amazing set of React components. If you work with them, you know their rich variety of components.

Unfortunately, I have trouble with bundle size. I searched the internet a lot hoping to find a way to optimize webpack bundle size. Here’s my approach on how to optimize and decrease bundle size in five steps.

If you don’t know how set up webpack 4, here’s my previous article, “How To Set Up webpack 4.”

Let’s start to evolve our webpack config.

1. Analyze Our Bundle

First, we have to know which component is having a larger size in our code.

I analyze our bundle dependencies via webpack-bundle-analyzer. This library analyzes the webpack statistics and gives a great visualization with an interactive zoomable tree map.

It will create two views: one for your React code and another for the node_modules. For this, we need to install it:

npm install --save-dev webpack-bundle-analyzer

We need to add the following code to webpack.config.js:

When we run the app, this visualization will show up:

Image for post
Image for post
webpack-bundle-analyzer report

This helps to understand which component is too big. And now we know we have trouble with Ant-Design, Ant-Design Icons, and moment.js.

2. Babel Configuration

Babel-plugin-transform-imports

Most developers import the lodash like this:

import { get } from 'lodash';

It seems like it’ll cause the bundle size to be very large because we import all Lodash modules. We should use it like this:

import _get from 'lodash/get';

In this case, we import particular methods from the Lodash rather than importing the whole package into our code.

Note: We can use babel-plugin-transform-imports. This plugin will transform your first line to the second line with this particular method and allow you to pull the modules you need.

You should install babel-plugin-transform-imports:

npm install --save-dev babel-plugin-transform-imports

Next, we should configure our wepback.config.js:

["transform-imports"], {
"lodash": {
"transform": "lodash/${member}",
"preventFullImport": true
}
}

Babel-plugin-import

When we import a component from Ant-Design, we’ll import all unused components.

To get Ant-Design to load only the needed modules, you should use babel-plugin-import. This plugin is compatible with antd, antd-mobile, lodash, material-UI, and so on.

Let’s install and test it:

npm install babel-plugin-import --save-dev

Add following code to webpack.config.js:

We’ll import from Ant-Design components only used modules with CSS from the es directory.

For lodash:

{
"libraryName": "lodash",
"libraryDirectory": "",
"camel2DashComponentName": false, // default: true
}

For material-ui:

{
"libraryName": "@material-ui/core",
"libraryDirectory": "components", // default: lib
"camel2DashComponentName": false, // default: true
}

3. Reduce the Size Of Moment.js

Moment.js a great library to work with to date objects. But if you look into the size of the bundle, moment.js is 500Kb.

We can reduce the size of moment.js from 500Kb to 125Kb with ContextReplacementPlugin. It specifies including the locale files in the webpack config file:

We don’t need to load the locale files in our code.

4. Reduce the Size of Ant-Design Icons

If you look into our bundle, we loaded a bunch of huge Ant-Design SVG icons. Let’s reduce their size by adding the following code to webpack.config.js:

resolve: {
alias: {
"@ant-design/icons/lib/dist$": path.resolve(__dirname, "src/constants/icons.js")
}
}

Next, we should create icons.js in the folder src/constants (or wherever you want it). Be sure it matches the alias path. In this file, you define which icons Ant Design should be included.

export {
default as BarChartOutline
} from "@ant-design/icons/lib/outline/BarChartOutline";

5. Code Splitting Using SplitChunksPlugin

SplitChunksPlugin splits our bundle into several small parts and loads bundles only as needed. webpack uses this plugin internally, and we can enable/configure it inside an optimization block of webpack.config.js.

In my case, I split for two parts (node_modules and src).

optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
}
}
}
Image for post
Image for post
Optimized bundle

Finally, the size of the bundle has been reduced from 6.26MB to 4.56MB.

I hope you found this post useful.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Gapur Kassym

Written by

Software Engineer, Technical Writer #JavaScript #React #React-Native #Nodejs. Follow me on twitter https://twitter.com/GKassym

Better Programming

Advice for programmers.

Gapur Kassym

Written by

Software Engineer, Technical Writer #JavaScript #React #React-Native #Nodejs. Follow me on twitter https://twitter.com/GKassym

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store