Build tools guide · 6 min read
How to minify JavaScript in Webpack
Enable TerserPlugin, configure production mode, and reduce bundle size with tree-shaking and code splitting. Complete Webpack 5 minification walkthrough.
Last updated:
[object Object]
[object Object]
1 Step 1 — Use production mode
[object Object]
[object Object][object Object]
2 Step 2 — Fine-tune TerserPlugin
[object Object]
[object Object]3 Step 3 — Enable tree-shaking
[object Object]
- [object Object]
[object Object][object Object]
[object Object]- [object Object]
4 Step 4 — Split vendor chunks
[object Object]
[object Object][object Object]
5 Step 5 — Measure the result
[object Object]
[object Object][object Object]
[object Object][object Object]
Frequently asked questions
Is Terser the same as UglifyJS?
Terser is a fork of UglifyJS that supports ES6+ syntax. UglifyJS is effectively abandoned — use Terser for anything modern.
Why is my bundle still huge after minification?
Minification compresses syntax, not imports. If you import all of Lodash (`import _ from 'lodash'`) you ship all of Lodash. Switch to per-function imports (`import cloneDeep from 'lodash/cloneDeep'`) or use lodash-es with tree-shaking.
Does Webpack minify CSS too?
Not by default — install `css-minimizer-webpack-plugin` and add it to `optimization.minimizer`. Webpack 5 will then minify CSS alongside JS.
Should I also gzip or Brotli-compress the output?
Yes. Minification reduces syntax; compression reduces bytes further (typically 70–80%). Use `compression-webpack-plugin` to generate `.gz` / `.br` files at build time, or let your CDN (Cloudflare, Netlify) compress on the fly.