Webpack压缩css/js代码减少包的体积大小

---

前言

在使用 Webpack 构建前端项目时，压缩 CSS 和 JavaScript 代码是优化性能、减少包体积的重要步骤。以下是实现这一目标的详细方法：

一、 使用 TerserPlugin压缩js代码

TerserPlugin 是 Webpack 内置的 JavaScript 压缩工具
自动启用：在生产模式下（mode: ‘production’），Webpack 会自动使用 TerserPlugin 压缩代码。
手动配置（可选）:代码如下

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

module.exports = {
  mode: 'production', // 必须为生产模式
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 移除 console 语句
          },
        },
      }),
    ],
  },
};

二、使用 css-minimizer-webpack-plugin压缩css代码

Webpack 5 及以上版本推荐使用内置的 css-minimizer-webpack-plugin。

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

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new terser({
        extractComments: false,
      }),
      new CssMinimizerPlugin({
        parallel: true, // 启用多进程并行运行以提高构建速度。
        minify: CssMinimizerPlugin.cssnanoMinify, // 使用 cssnano 来压缩 CSS 代码。
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

压缩效果：

总结

通过以上配置，可以显著减少打包后的文件体积，提升加载速度和用户体验。