Ian Obermiller

Part time hacker, full time dad.

Shave 45kb off your production webpack + React build

Posted

If you're building a React app for production using webpack, don't forget this simple plugin for your production build:

new webpack.DefinePlugin({
  'process.env': {NODE_ENV: '"production"'},
});

It will replace all instances of process.env.NODE_ENV with the string "production". When used in conjunction with the uglify plugin, all the code in React that is inside a dev only conditional like if ("production" !== process.env.NODE_ENV) { ... } will be stripped.

On my simple app, this shaved 45kb off the production build before gzip. After gzip saved 13.5kb, still not bad. Win!