在 Webpack（特别是 Webpack 5）中，压缩 JavaScript、CSS 和图片资源是优化前端性能的核心步骤。以下是针对这三种资源的压缩配置指南：

一、 压缩 JavaScript

在 Webpack 5 中，当 mode 设置为 'production' 时，默认会开箱即用地使用 terser-webpack-plugin 进行 JS 压缩。

如果你需要自定义配置（例如移除 console.log 或剔除注释），可以手动安装并配置：

1. 安装依赖：

   bash

   npm install terser-webpack-plugin --save-dev

2. 配置 webpack.config.js：

   javascript

   const TerserPlugin = require('terser-webpack-plugin');
   
   module.exports = {
     mode: 'production',
     optimization: {
       minimize: true,
       minimizer: [
         new TerserPlugin({
           terserOptions: {
             compress: {
               drop_console: true, // 生产环境移除 console.log
             },
             format: {
               comments: false, // 移除所有注释
             },
           },
           extractComments: false, // 不将注释抽取到单独的 .LICENSE.txt 文件中
         }),
       ],
     },
   };

补充（极速方案）： 如果觉得 Terser 压缩太慢，可以使用 esbuild-loader 或 swc-loader 替代，构建速度可提升数倍。

二、 压缩 CSS

Webpack 默认不会压缩 CSS，你需要将 CSS 提取为单独文件，然后使用 css-minimizer-webpack-plugin 进行压缩。

1. 安装依赖：

   bash

   npm install mini-css-extract-plugin css-minimizer-webpack-plugin --save-dev

2. 配置 webpack.config.js：

   javascript

   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
   
   module.exports = {
     mode: 'production',
     module: {
       rules: [
         {
           test: /\.css$/i,
           // 注意：生产环境用 MiniCssExtractPlugin.loader 替代 style-loader
           use: [MiniCssExtractPlugin.loader, 'css-loader'],
         },
       ],
     },
     plugins: [
       new MiniCssExtractPlugin({
         filename: 'css/[name].[contenthash:8].css',
       }),
     ],
     optimization: {
       minimize: true,
       minimizer: [
         '`...`', // Webpack 5 语法：保留默认的 JS 压缩器（如 Terser）
         new CssMinimizerPlugin(), // 压缩 CSS
       ],
     },
   };

三、 压缩图片资源

对于图片压缩，推荐使用 image-minimizer-webpack-plugin。它支持无损和有损压缩，并且可以搭配 imagemin 或 squoosh 使用。

1. 安装依赖（以 imagemin 无损压缩为例）：

   bash

   npm install image-minimizer-webpack-plugin imagemin --save-dev
   # 安装具体的图片格式优化器：
   npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

2. 配置 webpack.config.js：

   javascript

   const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
   
   module.exports = {
     mode: 'production',
     module: {
       rules: [
         {
           test: /\.(png|jpe?g|gif|svg)$/i,
           type: 'asset', // Webpack 5 内置资源模块（自动处理小图 base64 和大图文件）
         },
       ],
     },
     optimization: {
       minimizer: [
         '`...`',
         new ImageMinimizerPlugin({
           minimizer: {
             implementation: ImageMinimizerPlugin.imageminMinify,
             options: {
               plugins: [
                 ['gifsicle', { interlaced: true }],
                 ['jpegtran', { progressive: true }],
                 ['optipng', { optimizationLevel: 5 }],
                 // SVG 优化
                 [
                   'svgo',
                   {
                     plugins: [
                       {
                         name: 'preset-default',
                         params: {
                           overrides: {
                             removeViewBox: false,
                             addAttributesToSVGElement: {
                               params: {
                                 attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],
                               },
                             },
                           },
                         },
                       },
                     ],
                   },
                 ],
               ],
             },
           },
         }),
       ],
     },
   };

四、 终极强化：传输层压缩 (Gzip / Brotli)

除了上述针对源码的体积压缩（Minify），在部署时预先生成 Gzip 或 Brotli 压缩包，可以让服务器直接返回压缩后的文件，极大减少网络传输时间。

1. 安装依赖：

   bash

   npm install compression-webpack-plugin --save-dev

2. 配置 webpack.config.js：

   javascript

   const CompressionPlugin = require('compression-webpack-plugin');
   
   module.exports = {
     plugins: [
       // 生成 .gz 文件
       new CompressionPlugin({
         test: /\.(js|css|html|svg)$/, // 针对文本资源压缩
         threshold: 10240, // 超过 10kb 的文件才压缩
         algorithm: 'gzip',
         ext: '.gz',
       }),
     ],
   };

   (注：这需要 Nginx 等服务器开启 gzip_static on; 配置即可直接复用这些预压缩文件)。

综合配置总结清单