Webpack Optimization

Optimizing webpack builds

Minimize

optimization: {
    minimize: true, # enable minimization
    minimizer: [
        new TerserPlugin() # minify JS
    ]
}

Cache

output: {
    filename: '[name].[contenthash].js' # cache busting
}

Tree Shaking

// package.json
"sideEffects": false # enable tree shaking
"sideEffects": ["\.css$"] # except CSS files

Bundle Analyzer

npm install webpack-bundle-analyzer # install
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
plugins: [
    new BundleAnalyzerPlugin() # visualize bundle
]

Production Build

webpack --mode production # production build
webpack --mode development # development build