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,

        },

      })),

    ])