Reduce React app's size using Webpack

Nov 13, 2017 React 中文版

When developing React application, you might have found out your app’s size is bigger than your expectation, and the size could reach 3MB even it’s a simple project. To reduce it, there are a variety ways. Thus, this article is about how to reduce React app’s size using Webpack and other useful plugins in few steps.

Use Webpack optimize plugin

Webpack already provides us with some plugins to reduce the size of bundle.js, and you can get more detailed information here. In my opinion, using UglifyJsPlugin is the simplest way to reduce bundled JS file size. So, let’s use it and configure Webpack config:

plugins: [
  new webpack.optimize.UglifyJsPlugin()
]

There are more optimize plugins you can apply, and above is just a simple example.

Optimize CSS assets

Don’t forget to reduce the size of CSS files. I use a plugin called optimize-css-assets-webpack-plugin to handle this. To install it:

npm install --save-dev optimize-css-assets-webpack-plugin

Add it into your Webpack config and apply it:

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
...
plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new OptimizeCssAssetsPlugin()
]

Compress all your assets

This step is quite common and important in web application development. Although some web frameworks prvoide similar features, it would be better to compress those assets while building React apps using compression-webpack-plugin. To install the plugin:

npm install --save-dev compression-webpack-plugin

Add it to your Webpack config:

const CompressionPlugin = require('compression-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
...
plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new OptimizeCssAssetsPlugin(),
  new CompressionPlugin({
    asset: "[path].gz[query]",
    algorithm: "gzip",
    test: /\.js$|\.css$|\.html$/,
    threshold: 0,
    minRatio: 0.8
  })
]

After above steps and rebuild, you should find out a significant decrease in your React app’s size. Of course, there are more ways to further improve. I will introduce them in a new post. :)

You might also like:

---