Zac Anger's Blog

• Take a baseline measurement.
  • There's no way to measure improvements without something to measure against.
  • Chrome's Timeline thing works well for this.
  • Try measuring total elapsed time between the initial paint and the final rendering.
  • Make sure the 'Paint' and 'Screenshot' options are checked.
• Obviously the first big one is to just make your production code production code.
  • NODE_ENV=production, webpack -p, etc.
  • You can do something like this in your Webpack config:

// stuff
plugins : [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV' : JSON.stringify('production')
  })
, new webpack.optimize.UglifyJsPlugin({
    compress : {
      warnings : false
    }
  })
]
// stuff

• Reduce calls to React.createClass (if we're still doing that).
  • Try using React Inline Elements for this.
  • We could configure Babel for this like so (this example would go directly in your package.json):

"babel": { "env": { "production": { "plugins": [
  "transform-react-constant-elements",
  "transform-react-inline-elements"
] } } }

• Keep checking against the initial benchmark.
• 'babel-plugin-transform-react-remove-prop-types' might also be useful. It removes unwanted/unused React.PropTypes.
• There's also 'babel-preset-react-optimize'