Gary Sieling

React: Performance improvements

You can shortcut rendering this way:

npm install --save react-addons-shallow-compare

And add this:

  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

To make React smaller, add this1

    new webpack.DefinePlugin({
      // A common mistake is not stringifying the "production" string.
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })

Then, follow the guy’s advice in the above reference and add this to package.json:

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

Once you’ve done this, enable a CDN like Cloudflare in front.

  1. https://reactjsnews.com/how-to-make-your-react-apps-10x-faster []
Exit mobile version