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:

Functional Programming

ES6

WebPack

Draft.js

React And Redux :

Salesforce