Webpack压缩JavaScript时出现文本重复问题求助

这是Webpack依赖的Terser压缩器的bug，并非你的代码编写问题。从压缩结果能看到，原代码中("[IT_DOUBLES]" + c + "d")部分被错误处理成了重复的[IT_DOUBLES][IT_DOUBLES]，导致字符串拼接逻辑错乱，输出结果不符合预期。

临时解决办法 #

• 升级Webpack或TerserPlugin到更高版本：后续版本已经修复了这类字符串拼接优化的bug，更新后可解决问题。
• 禁用Terser的字符串拼接优化：在Webpack配置中修改TerserPlugin的参数，关闭相关优化项，示例配置如下：

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            collapse_vars: false, // 禁用变量折叠优化
            join_vars: false // 禁用变量拼接优化
          }
        }
      })
    ]
  }
};

编写可被正确压缩的JS代码的通用注意点 #

• 避免过于复杂的嵌套字符串拼接逻辑，尽量保持拼接结构清晰；
• 对于需要保留原样的特殊字符串片段，可考虑用变量单独存储，减少压缩器误判的可能；
• 测试压缩后的代码逻辑，尤其是涉及字符串、正则表达式的场景。

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