webpack 压缩文件

一

使用 Webpack 压缩文件大小，最基础且最重要的一步就是开启生产模式。在此基础上，还可以针对 JS、CSS、图片等不同资源进行深度压缩和优化。以下是具体的操作指南：

⚙️ 1. 开启生产模式（最基础的一步）

在 webpack.config.js 中将 mode 设置为 production。这会自动启用 Webpack 内置的一系列优化，包括代码压缩、Tree Shaking（移除未使用代码）和作用域提升等。

复制代码

module.exports = {
  mode: 'production', // 自动开启压缩和优化
};

📜 2. 深度压缩 JavaScript 代码

Webpack 5 内置了 TerserPlugin 来压缩 JS。在生产模式下它会自动运行，但你可以通过自定义配置来进一步压榨体积（例如移除生产环境中的 console.log 语句）。

复制代码

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

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true, // 开启多线程压缩，提升打包速度
        terserOptions: {
          compress: {
            drop_console: true, // 移除所有的 console.* 语句
            pure_funcs: ['console.log'], // 或者只移除特定的 console 方法
          },
        },
      }),
    ],
  },
};

🎨 3. 压缩 CSS 代码

CSS 的压缩需要使用 css-minimizer-webpack-plugin 插件。它可以去除 CSS 中的空格、注释，并优化选择器。

复制代码

// 需先安装：npm install css-minimizer-webpack-plugin --save-dev
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      // 注意：当你自定义 minimizer 时，需要把 TerserPlugin 也加进来，否则 JS 不会被压缩
      new TerserPlugin(),
      new CssMinimizerPlugin({
        parallel: true, // 开启多线程压缩
      }),
    ],
  },
};

🖼️ 4. 压缩图片资源

图片往往占据前端项目体积的大头。你可以使用 image-webpack-loader 在打包时自动压缩图片（支持 PNG, JPEG, GIF, SVG 等格式）。

复制代码

// 需先安装：npm install image-webpack-loader --save-dev
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: 'asset', // Webpack 5 内置的资源模块
        use: [
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: { progressive: true, quality: 65 }, // 压缩 JPEG
              pngquant: { quality: [0.65, 0.90], speed: 4 }, // 压缩 PNG
            },
          },
        ],
      },
    ],
  },
};

💡 5. 进阶压缩：生成 Gzip / Brotli 预压缩文件

除了压缩代码本身，还可以使用 compression-webpack-plugin 在打包时生成 .gz 或 .br 的预压缩文件。配合 Nginx 等服务器配置，可以直接将这些极小的压缩文件发给浏览器，大幅减少网络传输体积。

复制代码

// 需先安装：npm install compression-webpack-plugin --save-dev
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      filename: '[path][base].gz', // 生成 .gz 文件
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/, // 匹配需要压缩的文件类型
      threshold: 10240, // 只处理大于 10KB 的文件
      minRatio: 0.8, // 只有压缩率小于 0.8 的才会被处理
    }),
  ],
};

💡 核心建议： 在压缩代码之前，强烈建议先使用 webpack-bundle-analyzer 插件来可视化分析你的打包体积，找出到底是哪个第三方库或模块占用了大量空间，从而进行针对性的优化（如按需引入、替换更轻量的库等）。

二下载 webpack-bundle-analyzer

webpack-bundle-analyzer 是作为一个开发依赖安装在你的前端项目中的。你只需要在项目根目录下打开终端，运行以下任意一条命令即可完成下载：

如果你使用 npm：

复制代码

npm install --save-dev webpack-bundle-analyzer

如果你使用 yarn：

复制代码

yarn add -D webpack-bundle-analyzer

🚀 下载后如何快速使用？

安装完成后，你需要在 Webpack 的配置文件（通常是 webpack.config.js）中引入并配置它。以下是一个最基础的配置示例：

复制代码

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...其他 Webpack 配置
  plugins: [
    new BundleAnalyzerPlugin() // 使用默认配置，打包后会自动在浏览器打开分析报告
  ]
};

配置好后，当你执行生产环境打包命令（如 npm run build）时，它会自动在浏览器中打开一个交互式的可视化页面，帮你直观地分析打包后的文件体积和模块依赖。