javascript - angular 压缩最佳实践

Question

在angular压缩的时候一般都会使用 uglify 这个 npm 插件，但是因为angular有依赖注入这个特点，所以感觉压缩后的代码还是很不安全。

请问有什么更好的方式么？

Answer 1

如果是项目需求的话，推荐使用webpack+ocLazyLoad，综合例子可以看这个Lazy load AngularJS with Webpack。
因为如果不对控制器或者模块进行按需加载的话，如果项目很大则打包出来的文件是很大的，影响加载速度与用户体验。

Answer 2

建议使用 Gulp 或者 Grunt 来完成这些工作，比如 Gulp 有个 gulp-inject 的工具，可以帮你生成代码中的所有 inject 对象。

例如：当你写一个 Controller 时不在需要手动的一个个添加 inject 数组，而用 /* @ngInject */ 取代

'use strict';

angular
    .module('app.controller')
    .controller('UserController', UserController);
    
/* @ngInject */
function UserController($stateParams, $rootScope, $scope) {
    var vm = this;
}

...

gulp-inject 将会为你生成如下代码到另一个文件，你可以指定一个目录：

'use strict';

angular
    .module('app.controller')
    .controller('UserController', UserController);
    
/* @ngInject */
function UserController($stateParams, $rootScope, $scope) {
    var vm = this;
}
// 这行是 gulp-inject 自动生成的
UserController.$inject = ['$stateParams', '$rootScope', '$scope'];
...

这样生成出来的代码要比自己一个个写减少不少工作量，更重要的是也更加安全。

希望有所帮助~ ：）

Answer 3

要注意个别实现后就可以放心使用了:
1.

angular.module('xxx').controller('xxCtrl', ['$scope', function ($scope) {
    
}]);

uglify后变量名被替换确实会影响module对依赖的识别(通过字面量), angular的解决办法是在[]内将依赖名以字符串的形式作为数组元素声明一遍，如上述的'$scope',最后一个元素接着控制器代码, 这样即便控制器参数中的依赖变量被替换,$inject 服务仍能通过前面的字符串声明取得(字符串不变)。
2.也可以显示通过$inject服务注入:

  angular.module('app').controller('ActivityCtrl', ActivityCtrl);

  ActivityCtrl.$inject = [
    '$state',
    '$sce'
  ];

   function ActivityCtrl ($state, $sce) {}

原理都是一个, 即angular中的$inject服务注入依赖.

Answer 4

我来纠正一下 @DotHide 的答案，方法没错,但是不是 gulp-inject 插件，而是 gulp-ng-annotate
更多内容参考
angular-styleguide
use-gulp