能否自动压缩HTML中AngularJS控制器的调用代码？

当然可以！你遇到的问题很常见：常规JS压缩工具能处理控制器代码，但模板里的绑定是字符串，它们没办法识别这些字符串对应控制器里的方法/属性，所以需要专门的工具联动处理JS和模板，实现名称的对应压缩。

先回顾下你的代码场景：

HTML：

<html> 
  <body ng-app='app' ng-controller='ctrl as vm'> 
    <a href='' ng-repeat='l in vm.list' ng-click='vm.doSomething(l)'> 
    ..... more html code

Controller：

(function(){ 
  function ctrl (service){ 
    var vm = this; 
    vm.doSomething = function(l){ ... do something } 
  } 
  ctrl.$inject= ["service"] 
  angular.module("app").controller("ctrl",ctrl); 
})(); 

下面是几个可行的自动化方案：

方案1：使用AngularJS专用混淆工具（推荐） #

这类工具可以同时扫描你的控制器代码和HTML模板，自动建立控制器属性/方法与模板调用的映射，然后统一重命名为短标识符。比如angular-obfuscator（可以集成到Gulp/Grunt等构建流程中）：

大致实现流程： #

• 第一步：处理控制器JS文件
  先用ng-annotate处理依赖注入（避免压缩后依赖丢失），再用angular-obfuscator扫描控制器中vm（即this）上的所有属性和方法，将它们重命名为短名称（比如doSomething→a，list→z）。
• 第二步：处理HTML模板
  使用同一个angular-obfuscator的模板处理插件，扫描模板中的ng-click、ng-repeat等指令，把对应的vm.doSomething替换为vm.a，vm.list替换为vm.z，确保和控制器的重命名完全对应。

这种方案配置简单，对现有代码侵入性低，是最常用的解决方案。

方案2：Google Closure Compiler高级优化模式 #

如果你愿意遵循更严格的代码规范，Google Closure Compiler的高级优化模式也能实现这个功能，但有几个前提：

1. 必须把HTML模板内联到JS中（比如用$templateCache把模板转成JS字符串，避免外部模板文件）；
2. 代码要符合Closure的规范，比如避免动态属性访问（比如不要写vm['doSomething']，要用直接的vm.doSomething）；
3. 依赖注入要正确（用$inject或者@ngInject注释）。

在满足这些条件后，Closure Compiler会自动分析控制器和模板的关联，重命名所有可安全混淆的属性和方法，包括模板里的调用。不过这个方案的学习成本较高，适合对构建流程有较高要求的项目。

重要注意事项 #

• 排除第三方依赖：如果你的模板里用到了第三方指令、服务的名称，一定要在工具配置里排除它们，避免被错误混淆；
• 充分测试：混淆完成后，一定要全面测试所有交互和绑定，确保没有因为重命名导致的功能异常；
• 避免手动修改：手动修改模板和控制器的名称很容易出错，尤其是项目规模较大时，一定要依赖自动化工具。

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