Webpack Advanced

Remove unused exports
mode: production // enables tree shaking

package.json
"sideEffects": false
// or specify files with side effects
"sideEffects": ["*.css", "*.scss"]

Use ES6 imports
import { function1 } from ./utils;
// Not: const utils = require(./utils)

Analyze bundle
npm install --save-dev webpack-bundle-analyzer

const BundleAnalyzerPlugin = require(webpack-bundle-analyzer).BundleAnalyzerPlugin;

plugins: [
  new BundleAnalyzerPlugin()
]

Minify
optimization: {
  minimize: true,
  minimizer: [new TerserPlugin()]
}

Runtime chunk
optimization: {
  runtimeChunk: single
}

Module IDs
optimization: {
  moduleIds: deterministic
}

Vendor chunk
splitChunks: {
  cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      name: vendors,
      chunks: all
    }
  }
}

Gzip compression
const CompressionPlugin = require(compression-webpack-plugin);

plugins: [
  new CompressionPlugin({
    algorithm: gzip,
    test: /\.(js|css|html|svg)$/
  })
]

Brotli compression
new CompressionPlugin({
  algorithm: brotliCompress,
  filename: [path][base].br
})