Skip to content

Instantly share code, notes, and snippets.

@gdborton
Last active February 13, 2018 20:50
Show Gist options
  • Save gdborton/77d1cc9b03b85e199e7dc02bc8afb89d to your computer and use it in GitHub Desktop.
Save gdborton/77d1cc9b03b85e199e7dc02bc8afb89d to your computer and use it in GitHub Desktop.
200KB exploration
import ReactDOM from 'react-dom';
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: path.resolve('src/index.js'),
output: {
filename: 'index.js',
path: path.resolve('dist'),
},
plugins: [
new webpack.optimize.UglifyJsPlugin({}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
})
]
}
@gaearon
Copy link

gaearon commented Feb 13, 2018

  1. DefinePlugin should be before the Uglify plugin.
  2. The production literal should be in quotes. Otherwise you’re replacing it with an undefined variable called production. This code will just crash at runtime.

@gaearon
Copy link

gaearon commented Feb 13, 2018

The correct way to do it is in the docs

https://reactjs.org/docs/optimizing-performance.html#webpack

@gdborton
Copy link
Author

I wouldn't expect DefinePlugin order to matter, I imagine they operate on different hooks. Tested order locally and it didn't affect size.

Updating w/ JSON.stringify got us down to ~100KB

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment