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