Minification and compression

Size reduction techniques

Minification removes unnecessary characters without changing functionality: whitespace, comments, long variable names. Compression (gzip, brotli) is applied by servers. Webpack production mode uses TerserPlugin for JS minification and CssMinimizerPlugin for CSS. These run automatically in production mode.

Configure minifiers

Customize minification settings for optimization.

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({ terserOptions: { compress: true } }),
      new CssMinimizerPlugin()
    ]
  }
};

Output:

Bundles minified and optimized for production

Balance speed vs size

Aggressive minification increases build time. For large projects, consider parallel minification. Server-side gzip/brotli compression is essential; modern servers apply it automatically for .js and .css files.

Quick check

Quick check: What is minification?

• Removing unnecessary characters while preserving functionality.
• Making code harder to understand.
• Splitting bundles into smaller pieces.