如何让Webpack在Tree Shaking时移除Sourcemap中被摇掉的代码？

这个问题确实挺常见的——Tree Shaking已经把未使用的代码从最终打包产物里清掉了，但Sourcemap还留着这些“死代码”的映射，确实有点烦人。下面是几个能帮你解决这个问题的方法：

核心原因先搞懂 #

Webpack的Tree Shaking主要是在代码生成阶段移除未被引用的代码，但默认的Sourcemap生成逻辑，可能会保留原始模块的完整内容映射，而没有同步过滤掉那些已经被摇掉的部分。要解决这个，得让Sourcemap的生成和Tree Shaking/压缩流程联动起来。

具体解决方案 #

1. 确保使用ES模块格式 #

Tree Shaking只对ES模块（import/export）生效，如果你的代码里混了CommonJS的require/module.exports，不仅Tree Shaking效果差，Sourcemap里也容易残留无效代码。所以先检查所有模块都用ES模块语法。

2. 配置Webpack的优化项和压缩工具 #

要让Sourcemap同步过滤掉被摇掉的代码，关键是让压缩工具（比如Terser）来处理Sourcemap，而不是Webpack单独生成。具体配置如下：

在你的webpack.config.js里：

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

module.exports = {
  // ...其他配置
  optimization: {
    // 开启Tree Shaking的基础开关
    usedExports: true,
    // 启用压缩（Tree Shaking通常和压缩配合生效）
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            // 强制移除未使用的代码，强化Tree Shaking效果
            drop_unused: true,
          },
        },
        // 让Terser生成Sourcemap，这会自动过滤掉被移除的代码映射
        sourceMap: true,
      }),
    ],
  },
  // 使用完整的source-map类型，避免eval系列（这类会保留更多原始代码信息）
  devtool: 'source-map',
};

3. 升级到Webpack 5（如果还在使用Webpack 4） #

Webpack 5对Tree Shaking和Sourcemap的联动处理做了不少优化，默认情况下就能更好地同步移除Sourcemap里的无效代码映射。如果你的项目还在Webpack 4，升级后大概率能解决这个问题。

4. 避免使用会保留原始模块的Sourcemap类型 #

像eval-cheap-source-map、eval-source-map这类Sourcemap类型，会直接引用原始模块文件，自然会包含所有代码（包括被摇掉的）。一定要用source-map、hidden-source-map或者nosources-source-map这类生成独立Sourcemap文件的类型。

验证方法 #

配置完后，你可以用Chrome DevTools的Sources面板，或者第三方的sourcemap分析工具查看生成的Sourcemap，确认被Tree Shaking移除的代码已经不在映射里了。

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