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

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
],
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 //installvar compression = require(‘compression’); //import to express appapp.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.gzapp.get('*.js', function (req, res, next) {
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
next();
});

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

--

--

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
rajaraodv

rajaraodv

Trying to make Web development simple. Former Developer Advocate @Salesforce, VMware (node.js); Engineer @ Yahoo, Zimbra. Twitter: @rajaraodv