如何用Webpack 5对Node模块做Tree Shaking解决Lighthouse未使用JS问题？

嘿，我明白你遇到的困扰——明明只用到了@sentry/node，却被Lighthouse检测出@sentry/hub的未使用JS，加了sideEffects: false也没解决。下面是针对Webpack 5的实用解决方案，一步步来：

1. 确保Webpack处于Production模式 #

Tree Shaking在开发模式下默认是不启用的，这是很多人踩的坑。先确认你的Webpack配置里明确设置了：

module.exports = {
  mode: 'production', // 关键！production模式会自动开启usedExports和minimize
  // ...其他配置
};

如果需要在开发模式下测试Tree Shaking，可以手动开启：

optimization: {
  usedExports: true, // 标记未使用的导出
  minimize: true, // 启用代码压缩（移除未使用代码）
}

2. 强制标记第三方包无副作用 #

你在自己的package.json里加了"sideEffects": false，但有些第三方包（比如@sentry的子包）自己的package.json可能没正确设置sideEffects，或者标记了某些文件有副作用，导致Webpack不敢摇掉它们。

在Webpack配置里针对特定第三方包强制设置sideEffects：

module: {
  rules: [
    {
      test: /node_modules\/@sentry\/.*\.js$/, // 匹配所有@sentry旗下的包
      sideEffects: false, // 告诉Webpack这些包没有副作用，可以安全摇树
    },
  ],
}

这样就能覆盖第三方包自身的sideEffects配置，让Webpack放心处理未使用的代码。

3. 优先使用ES模块版本 #

Webpack对ES模块（import/export）的Tree Shaking支持远好于CommonJS（require）。检查第三方包的package.json是否有module字段（指向ES模块入口），如果有，Webpack会优先使用；如果没有，手动配置Webpack优先查找ES模块：

resolve: {
  mainFields: ['module', 'main'], // 先找module字段，再找main
}

比如@sentry/node的最新版本应该已经提供了ES模块入口，这样配置后Webpack能更高效地分析依赖。

4. 分析打包结果定位问题 #

有时候看起来未使用的代码，可能是因为隐藏的依赖或者动态导入导致Webpack无法识别。用webpack-bundle-analyzer工具可视化分析打包结果：

1. 安装依赖：

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

2. 在Webpack配置里添加插件：

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

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

3. 运行打包，打开生成的可视化页面，就能清楚看到@sentry/hub里哪些代码被包含进来，是否真的未使用，以及它们的依赖链。

5. 优化Webpack的Tree Shaking配置 #

Webpack 5默认已经开启了很多优化，但可以明确配置强化Tree Shaking：

optimization: {
  usedExports: true, // 标记未使用的导出
  innerGraph: true, // 分析模块内部的依赖关系，摇掉未使用的内部代码
  minimizer: [
    new require('terser-webpack-plugin')({
      terserOptions: {
        compress: {
          dead_code: true, // 确保开启死代码消除
          unused: true,
        },
      },
    }),
  ],
}

注意：production模式下这些默认已经开启，但如果自定义了minimizer，要确保没禁用这些选项。

最后检查 #

做完以上配置后，重新打包，再用Lighthouse检测，应该就能看到未使用JS的问题得到改善啦。如果还有残留，再用bundle analyzer仔细排查是不是有隐藏的导入或者第三方包的特殊逻辑导致代码无法被摇掉。

内容的提问来源于stack exchange，提问作者utopia