CSS/JS Minification
Minifying CSS and JavaScript files.
Why Minify?
Benefits
• Smaller file sizes (30-60% reduction)
• Faster download times
• Reduced bandwidth costs
• Improved performance scores
What it does
• Removes whitespace
• Removes comments
• Shortens variable names
• Optimizes code
Terser (JavaScript)
Install
npm install --save-dev terser
CLI usage
npx terser input.js -o output.min.js
With options
terser input.js -c -m -o output.min.js
-c = compress, -m = mangle (shorten names)
Webpack integration
Automatically enabled in production mode
CSS Minification
cssnano (PostCSS plugin)
npm install --save-dev cssnano
postcss.config.js
module.exports = {
plugins: [
require(cssnano)({
preset: default
})
]
}
CLI (clean-css)
npx cleancss input.css -o output.min.css
HTML Minification
html-minifier
npm install --save-dev html-minifier
CLI usage
html-minifier --collapse-whitespace --remove-comments input.html -o output.html
Common options
--collapse-whitespace
--remove-comments
--minify-css
--minify-js