#webpack2

So first step is to analyze your bundle.js file. Webpack has a nice feature to export your bundle stats to a JSON file, and then just upload this file which will give you a nice graphical report.

In your project folder, run this command:,webpack --json > stats.json upload this JSON file to this website

The output will be something like this:

Now identify your unused, duplicate or replaceable dependencies and then let's minify it using Webpack2.

Webpack2 is more powerful and it has huge support for ES6, a complete feature list is available here

The configuration I am using for my webpack:

const path = require('path'); const output = path.resolve(__dirname, 'public'); const src = path.resolve(__dirname, 'app'); const clientConfig = { target: 'web', entry: `${src}/index.js`, output: { path: output, filename: 'js/bundle.js', }, resolve: { extensions: ['.js', '.jsx'] }, module: { rules: [ { test: /\.html$/, exclude: /node_modules/, use: 'html-loader', }, { test: /\.(js|jsx)$/, exclude: /node_modules/, use: [ 'babel-loader' ], } ] } }; module.exports = [clientConfig];

Now by running, webpack -p will generate a minified version of bundle.js.

Let's take this a step ahead by gzipping our bundled file. To enable gzipping we will require: compression-webpack-plugin

plugins: [ new CompressionPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: /\.js$|\.html$|\.css$/, threshold: 10240, minRatio: 0.8 }) ]

You can enable gzipping only for production by reading

-p

argument.