# Minification and compression — Webpack

Source: https://www.geekswithgeeks.com/en/webpack/webpack-16

> Reduce bundle size with minification.

## 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.

```javascript
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

**Quiz:** What is minification?

- [x] Removing unnecessary characters while preserving functionality.
- [ ] Making code harder to understand.
- [ ] Splitting bundles into smaller pieces.

*Answer:* Removing unnecessary characters while preserving functionality.. Minification reduces file size by removing whitespace, comments, and shortening variable names without changing what the code does.