Two Quick Ways To Reduce React App’s Size In Production

If you are building a React + Redux App that has Webpack, then you might have noticed that the size of the final bundle.js (the dev version) for a simple app itself could be 1MB- 2MB!

For example: Below is a picture from Webpack stats analyzer for the simple react-redux-blog (live). It shows that total size is 1.5MB and 90% (1.2MB) is just libraries in node_modules!

It could be scary😱 but Webpack and Node.js has all the tools you need to reduce the size.

I could reduce the size from 1.5MB to just 90KB by simply doing the following two things:

1. Add the following Webpack plugins (source code)

plugins: [
    new webpack.DefinePlugin({ // <-- key to reducing React's size
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.DedupePlugin(), //dedupe similar code 
    new webpack.optimize.UglifyJsPlugin(), //minify everything
    new webpack.optimize.AggressiveMergingPlugin()//Merge chunks 
  ],

Those plugins brought down the size from 1.5MB to 379KB!

File size Development v/s Production

2. Serve gzipped file in production

You can dramatically reduce the size by gzipping the bundle.js. There are two ways to do it. 1. dynamic gzip (not preferred) and 2. build-time gzip (preferred)

2.1 dynamic gzip (not preferred)

You can simply add “compression” Express plugin to your app. This dynamically compresses the bundle.js and serves it. But, it will add to CPU and performance (thanks rajeshsegu for pointing this out).

//Simply do this to add dynamic gzipping (not preferred)
npm install compression --save //install
var compression = require(‘compression’); //import to express app
app.use(compression());//add this as the 1st middleware

2.2 Build time gzip (preferred)

Instead of generating bundle.js, generate bundle.js.gz using Webpack’s compression plugin. Then add a middleware to return gzipped JS file.

1.Install the Webpack compression plugin 
npm install compression-webpack-plugin --save-dev

2. Import the plugin to webpack.config.prod.js
var CompressionPlugin = require('compression-webpack-plugin');
3. Add it to plugins array
  plugins: [
    new webpack.DefinePlugin({ 
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
    new CompressionPlugin({   <-- Add this
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
4. Finally, add this middleware to Express to return .js.gz so you can still load bundle.js from the html but will receive bundle.js.gz
app.get('*.js', function (req, res, next) {
  req.url = req.url + '.gz';
  res.set('Content-Encoding', 'gzip');
  next();
});

This reduced my app’s size from 379KB to just ~90KB!

Note: There are other ways to further improve. I plan to write another longer post in the future when Webpack 2 get released.

That’s it! 👍

🎉🎉🎉 If you like this post, please 1. ❤❤❤ it below on Medium and 2. please share it on Twitter.🎉🎉🎉

My Other Posts

LATEST: The Inner Workings Of Virtual DOM (With Lots Of Pictures)

React Performance:

1. Two Quick Ways To Reduce React App’s Size In Production
2. Using Preact Instead Of React

Functional Programming

1. JavaScript Is Turing Complete — Explained
2. Functional Programming In JS — With Practical Examples (Part 1)
3. Functional Programming In JS — With Practical Examples (Part 2)
4. Why Redux Need Reducers To Be “Pure Functions”

ES6

1. 5 JavaScript “Bad” Parts That Are Fixed In ES6
2. Is “Class” In ES6 The New “Bad” Part?

WebPack

1. Webpack — The Confusing Parts
2. Webpack & Hot Module Replacement [HMR] (under-the-hood)
3. Webpack’s HMR And React-Hot-Loader — The Missing Manual

Draft.js

1. Why Draft.js And Why You Should Contribute
2. How Draft.js Represents Rich Text Data

React And Redux :

1. Step by Step Guide To Building React Redux Apps
2. A Guide For Building A React Redux CRUD App (3-page app)
3. Using Middlewares In React Redux Apps
4. Adding A Robust Form Validation To React Redux Apps
5. Securing React Redux Apps With JWT Tokens
6. Handling Transactional Emails In React Redux Apps
7. The Anatomy Of A React Redux App
8. Why Redux Need Reducers To Be “Pure Functions”
9. Two Quick Ways To Reduce React App’s Size In Production

Salesforce

1. Developing React Redux Apps In Salesforce’s Visualforce