使用Angularjs搭的框架寫的項(xiàng)目碌秸， 處于對(duì)性能的考慮，發(fā)布時(shí)候可以采用合并壓縮方式悄窃，縮短請(qǐng)求時(shí)間讥电，但也我覺得也并不是所有項(xiàng)目，所有代碼都要壓縮合并轧抗，并不見得有多大好處恩敌。
我合并壓縮了所有的controller，在第一次加載頁(yè)面時(shí)候會(huì)加載合并的js横媚。然后在切換頁(yè)面時(shí)就不需要做什么請(qǐng)求了纠炮。
可以使用工具JSCompress進(jìn)行壓縮合并，但是合并后要手動(dòng)修改自己的配置路徑灯蝴。
至少路由那一塊要修改哈恢口。
剛開始沒有頭緒，以為只要把所有代碼合并下穷躁，壓縮下耕肩，就完事了。no no no
首先就是路由問題问潭，每個(gè)頁(yè)面都有controller猿诸，每個(gè)controller寫在單獨(dú)的一個(gè)js文件中，現(xiàn)在要做的就是合并狡忙。工具合并只是第一步梳虽，他會(huì)把所有的js寫到一塊，這樣理論上可行，但是你現(xiàn)在運(yùn)行時(shí)候就會(huì)發(fā)現(xiàn)各種錯(cuò)誤。
下面做個(gè)簡(jiǎn)單的合并壓縮的演示
原來 route.js下的路由:
$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
(function(){
define(['../module'],function(module){
var myApp = angular.module(config.CONTROLLER_MODULE);
myApp.controller('AController', [
/*引入依賴*/
...
function (...) {
...
}]);
})
})();
合并為 all-controller.js 同時(shí)也可以壓縮為all-controller.min.js
(function(){
define(['../module'],function(module){
var myApp = angular.module(config.CONTROLLER_MODULE);
myApp.controller('AController', [
/*引入依賴*/
...
function (...) {
...
}]);
myApp.controller('BController', [
/*引入依賴*/
...
function (...) {
...
}]);
})
})();
route.js 修改為
$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')
})
