使用Angularjs搭的框架写的项目， 处于对性能的考虑，发布时候可以采用合并压缩方式，缩短请求时间，但也我觉得也并不是所有项目，所有代码都要压缩合并，并不见得有多大好处。

　　我合并压缩了所有的controller，在第一次加载页面时候会加载合并的js。然后在切换页面时就不需要做什么请求了。

　　可以使用工具JSCompress进行压缩合并，但是合并后要手动修改自己的配置路径。

　　至少路由那一块要修改哈。

　　刚开始没有头绪，以为只要把所有代码合并下，压缩下，就完事了。no no no

　　首先就是路由问题，每个页面都有controller，每个controller写在单独的一个js文件中，现在要做的就是合并。工具合并只是第一步，他会把所有的js写到一块，这样理论上可行，但是你现在运行时候就会发现各种错误。

　　下面做个简单的合并压缩的演示

　　原来 route.js下的路由:

1
2
3
4
5
6
7
8
9
10
11
12
13
$stateProvider
     .state('home.a', {
         url: '/a',
         //controller: 'AController',
         templateUrl: 'views/common/a.html',
         resolve: lazyLoader.resovleDeps('controllers/common/a-controller')
     })
     .state('home.b', {
         url: '/b',
         //controller: 'BController',
         templateUrl: 'views/common/b.html',
         resolve: lazyLoader.resovleDeps('controllers/common/b-controller')
     })

　　a-controller.js or b-controller.js

1
2
3
4
5
6
7
8
9
10
11
12
13
(function(){
    define(['../module'],function(module){
        var myApp = angular.module(config.CONTROLLER_MODULE);
        myApp.controller('AController', [
            /*引入依赖*/
            ...
            function (...) {
                ...

            }]);

    })
})();

　　合并为 all-controller.js 同时也可以压缩为all-controller.min.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function(){
    define(['../module'],function(module){
        var myApp = angular.module(config.CONTROLLER_MODULE);
        myApp.controller('AController', [
            /*引入依赖*/
            ...
            function (...) {
                ...

            }]);

        myApp.controller('BController', [
            /*引入依赖*/
            ...
            function (...) {
                ...

            }]);
    })
})();

　　route.js 修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$stateProvider
      .state('home.a', {
          url: '/a',
          //controller: 'AController',
          templateUrl: 'views/common/a.html',
          resolve: lazyLoader.resovleDeps('controllers/common/all')
          //如果使用压缩文件 就改为  resolve: lazyLoader.resovleDeps('controllers/common/all.min')
      })
      .state('home.b', {
          url: '/b',
          //controller: 'BController',
          templateUrl: 'views/common/b.html',
          resolve: lazyLoader.resovleDeps('controllers/common/all')
      })