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