terser-webpack-plugin weekly downloads statistics

[![npm][npm]][npm-url] [![node][node]][node-url] [![tests][tests]][tests-url] [![cover][cover]][cover-url] [![discussion][discussion]][discussion-url] [![size][size]][size-url]

minimizer-webpack-plugin

This plugin minifies your assets in a webpack build. It ships with several built-in minimizers covering JavaScript, JSON, HTML, and CSS — pick one with the minify option and target the right files with test.

JavaScript minimizers:

• terser — MinimizerPlugin.terserMinify (default). The same JavaScript-based minifier that webpack uses out of the box; produces small, well-tested output and supports the full set of extractComments modes. • uglify-js — MinimizerPlugin.uglifyJsMinify. ES5-only minifier, useful when you specifically need UglifyJS-compatible output. Requires npm install --save-dev uglify-js. • @swc/core — MinimizerPlugin.swcMinify. A very fast Rust-based JavaScript/TypeScript minifier. Requires npm install --save-dev @swc/core. • esbuild — MinimizerPlugin.esbuildMinify. An extremely fast JS bundler/minifier; legal comments are always preserved (no extractComments support). Requires npm install --save-dev esbuild.

JSON minimizer:

• JSON.stringify — MinimizerPlugin.jsonMinify. Built in (no extra dependency); supports space and replacer options.

HTML minimizers:

• html-minifier-terser — MinimizerPlugin.htmlMinifierTerser. The default HTML minimizer. JavaScript-based, no native dependency. Requires npm install --save-dev html-minifier-terser. • @swc/html — MinimizerPlugin.swcMinifyHtml (full HTML documents) and MinimizerPlugin.swcMinifyHtmlFragment (HTML fragments, e.g. or partial HTML strings). • MinimizerPlugin.minifyHtmlNode — uses @minify-html/node.

The HTML minimizers are optional peer dependencies — install only the one you actually use:

Note

HTML assets typically come from plugins like copy-webpack-plugin, html-webpack-plugin, or webpack's asset modules.

Note

Whitespace handling differs between tools (defaults):

- @swc/html — removes/collapses whitespace only in safe places (around html/body, inside , between // etc.). - html-minifier-terser — always collapses multiple whitespaces to a single space (never removes entirely); configurable via its options. - @minify-html/node — see its whitespace docs.

html-minifier-terser

html-minifier-terser is a JavaScript-based HTML minifier with no native dependency. It's the default HTML minimizer.

webpack.config.js

@swc/html — HTML documents

Use swcMinifyHtml for complete HTML documents (i.e. with a doctype and // tags).

webpack.config.js

@swc/html — HTML fragments

Use swcMinifyHtmlFragment for partial HTML — for example, content of tags or HTML strings that get injected into another document.

webpack.config.js

Note

The difference between swcMinifyHtml and swcMinifyHtmlFragment is the error reporting — invalid or broken syntax is reported at build time.

@minify-html/node

@minify-html/node is a Rust HTML minifier.

webpack.config.js

You can also stack multiple MinimizerPlugin instances to compress different files with different minify functions in the same build (e.g. JS with terserMinify, HTML with htmlMinifierTerser, JSON with jsonMinify).

CSS

The plugin can minify CSS assets too. Pick one of the bundled CSS minimizers and set test to match your CSS files.

Available CSS minimizers:

• MinimizerPlugin.cssnanoMinify — uses cssnano (via postcss). • MinimizerPlugin.cssoMinify — uses csso. • MinimizerPlugin.cleanCssMinify — uses clean-css. • MinimizerPlugin.esbuildMinifyCss — uses esbuild with the CSS loader. • MinimizerPlugin.lightningCssMinify — uses lightningcss. • MinimizerPlugin.swcMinifyCss — uses @swc/css.

The CSS minimizers are optional peer dependencies — install only the ones you actually use:

Note

CSS assets typically come from plugins like mini-css-extract-plugin or webpack's asset modules.

cssnano

cssnano is the default CSS minimizer. It runs as a PostCSS plugin.

webpack.config.js

csso

csso is a CSS minifier with structural optimisations.

webpack.config.js

clean-css

clean-css is a widely-used CSS optimiser.

webpack.config.js

esbuild

esbuild ships with a fast CSS minifier (used via its CSS loader).

webpack.config.js

lightningcss

lightningcss is a Rust-based CSS parser, transformer, and minifier.

webpack.config.js

@swc/css

@swc/css is a Rust-based CSS minifier.

webpack.config.js

Custom Minify Function

Override the default minify function - use uglify-js for minification.

webpack.config.js

Typescript

With default Terser minify function:

With built-in minify functions:

Contributing

We welcome all contributions! If you're new here, please take a moment to review our contributing guidelines before submitting issues or pull requests.

CONTRIBUTING

License

MIT

Description from the npm listing.