Webpack条件编译中const常量判断无法移除死代码该如何解决？

问题根因 #

Webpack 4 的死代码剔除依赖Terser压缩器的优化能力，默认配置下Terser不会做跨语句的深度常量传播分析。
EnvironmentPlugin 仅会将代码中的process.env.XXX直接替换为对应的环境变量字面量，你写的常量赋值写法替换后会变成如下形式：

const check = "你的环境变量实际值" === 'some_value'
if(check) {
  calculation()
}

Webpack 4 默认的Terser配置不会提前计算这个const表达式的结果，也就无法识别后续if分支的死代码，只有直接把process.env判断写在if条件内的写法，才能被Terser识别并做分支剔除。

Webpack 4 解决方案 #

• 调整TerserPlugin配置：显式开启Terser的常量计算和死代码优化选项，如果你项目未自定义压缩配置，需要在webpack配置中新增如下配置：

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

module.exports = {
  // 其余配置省略
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            // 开启常量计算
            evaluate: true,
            // 开启死代码剔除
            dead_code: true,
            // 开启const常量优化
            consts: true
          }
        }
      })
    ]
  }
}

• 提前通过DefinePlugin注入预计算常量：在webpack配置中提前计算好判断结果，直接注入为布尔字面量，Terser可以直接识别：

// webpack配置
new webpack.DefinePlugin({
  __MY_VARIABLE_CHECK__: JSON.stringify(process.env.MY_VARIABLE === 'some_value')
})

// 业务代码
const check = __MY_VARIABLE_CHECK__
if(check) {
  calculation()
}

• 使用babel-plugin-transform-define：如果项目接入了Babel，可以通过该插件在编译阶段提前完成常量替换，更早完成值的计算，不需要依赖Webpack压缩阶段的优化。

Webpack 5 支持情况 #

Webpack 5 内置了更强大的常量折叠和跨语句静态分析能力，默认生产构建配置下，不需要额外做任何配置，你提到的第二种const常量赋值后判断的写法已经可以自动触发死代码剔除，未命中的分支会直接从构建产物中移除。

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