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

Posted 2020-07-29 Answer1215

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. [email protected] 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,
        },
      })),
    ])