How to optimize your application’s size

Gapur Kassym

Follow

Nov 6, 2019 · 4 min read

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:

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"
      }
    }
  }
}

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

I hope you found this post useful.

Resources

• “Here’s how I reduced my bundle size by 90%”
• “Reduce your React bundle size with webpack by half”
• “Optimize your app bundle size with webpack”
• “How to customize Ant Design with React & Webpack”