代码压缩与 Tree Shaking

约 493 字大约 2 分钟

2026-02-11

压缩和 Tree Shaking 是两类不同但互补的优化：

压缩：减少代码体积（删除空白、缩短变量名、移除注释等）。
Tree Shaking：删除未使用代码（减少无效逻辑）。

两者叠加后，才能真正降低传输成本。

JavaScript / CSS 压缩

先看目标：生产构建里尽可能减小 JS/CSS 体积，同时保证构建稳定性。

pnpm add -D terser-webpack-plugin css-minimizer-webpack-plugin

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

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        parallel: true,
        terserOptions: {
          compress: { passes: 2 },
          mangle: true,
        },
      }),
      new CssMinimizerPlugin(),
    ],
  },
};

HTTP 压缩（gzip）

打包压缩解决的是“文件内容更小”，HTTP 压缩解决的是“传输过程更省带宽”。

pnpm add -D compression-webpack-plugin

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      test: /\.(js|css|html|svg)$/i,
      threshold: 10 * 1024,
      minRatio: 0.8,
      algorithm: 'gzip',
    }),
  ],
};

笔记

生成 .gz 文件后，服务端也要正确配置静态压缩文件回源，否则不会生效。

Tree Shaking：删除未使用代码

Tree Shaking 要生效，核心依赖两点：

ESM 模块语义（import / export）。
usedExports 与 sideEffects 的配合。

module.exports = {
  optimization: {
    usedExports: true,
  },
};

{
  "sideEffects": [
    "*.css"
  ]
}

sideEffects 告诉打包器“哪些文件有副作用不能删”。

警告

如果写了 sideEffects: false 却没把 CSS 等副作用文件白名单保留，样式可能被错误移除。

使用注意事项

建议

压缩仅在生产环境启用。
JS/CSS/HTTP 压缩配套做，收益更完整。
Tree Shaking 前先确保依赖尽量使用 ESM 版本。

常见错误

最佳实践

先做体积基线，再做压缩与摇树，对比收益。
把 sideEffects 配置纳入代码评审。
定期清理不再使用的依赖，避免“摇不掉的历史包袱”。

基础篇

性能优化篇

基础篇