如何解决Webpack.optimize.UglifyJsPlugin小写Angular模板属性名问题

现象说明 #

本地开发环境默认不会开启混淆压缩规则，指令命名不会被修改，因此运行正常；只有生产构建环节启用Uglify压缩时才会触发属性转小写的问题，和你已完成的模块导入配置无关。

修复配置方案 #

直接修改Webpack配置中Webpack.optimize.UglifyJsPlugin的初始化参数，添加以下规则即可：

new webpack.optimize.UglifyJsPlugin({
  uglifyOptions: {
    // 避免混淆修改Angular相关指令属性名
    mangle: {
      keep_fnames: true,
      properties: {
        // 不对引号包裹的属性名做修改，大部分内嵌Angular模板的属性会以字符串形式存在
        keep_quoted: true,
        // 手动指定要保留的属性关键字，避免被转小写/混淆
        reserved: [
          'ngFor',
          'ngIf',
          'ngSwitch',
          'ngClass',
          'ngStyle'
          // 其他用到的Angular内置/自定义指令属性可按需补充
        ]
      }
    },
    compress: {
      // 关闭可能修改属性名大小写的压缩规则
      properties: false
    }
  }
})

替代优化方案 #

如果调整上述配置后仍存在兼容问题，可将UglifyJsPlugin替换为Angular 12官方构建流程默认使用的terser-webpack-plugin，该压缩工具对Angular模板语法的兼容性更好，默认不会出现强制转小写的问题。

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