[Webpack 2] Optimize React size and performance with Webpack production plugins

You can fine tune several webpack plugins to make your bundle as small as it can be for your specific application. However there are a few things you can do for pretty much every application to make it smaller and run faster. In this lesson we’ll combine several webpack plugins to optimize things for a React application (this is also applicable for non-React applications as well).

 

First we need to modify the prod scripts from:

"build:prod": "webpack --env.prod -p",

to:

"build:prod": "webpack --env.prod",

 

Help methods:

    plugins: removeEmpty([
      // doesn't save anything in this small app. npm@3 mostly takes care of this
      ifProd(new webpack.optimize.DedupePlugin()),
      // saves a couple of kBs
      ifProd(new webpack.LoaderOptionsPlugin({  //Loader plugin only works in webpack 2
        minimize: true,
        debug: false,
        quiet: true,
      })),
      // saves 65 kB with Uglify!! Saves 38 kB without
      ifProd(new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"',
        },
      })),
      // saves 711 kB!!
      ifProd(new webpack.optimize.UglifyJsPlugin({
        compress: {
          screw_ie8: true, // eslint-disable-line
          warnings: false,
        },
      })),
    ])