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

2.1 dynamic gzip (not preferred)

//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)

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

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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Setting Up Logging within Kubernetes

GraphQL vs. REST API Architecture

GraphQL logo versus REST logo on gradient background

How to Set-up a cost-effective AWS EMR cluster and Jupyter Notebooks for SparkSQL

Native? Hybrid? Web App?

5 Tips to Write the Best Brief for a Software Development Project

Cache is the Root of All Evil

Cloud Native - Developer Workflow

How To Become a DevOps Engineer In Six Months or Less, Part 3: Version

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

More from Medium

Caching API responses in React

An easy how-to guide for adding newsletter subscribers through the Mailchimp API

functional Componnts-ReactJs

Trick for Conditional Rendering in Navlink component of React Router