用angular有一段時間了,平日里只顧著寫代碼,沒有注意到性能優(yōu)化的問題,而今有時間,于是捋了捋,講學(xué)習(xí)過程記錄于此:
成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)10年經(jīng)驗成就非凡，專業(yè)從事成都做網(wǎng)站、網(wǎng)站設(shè)計，成都網(wǎng)頁設(shè)計，成都網(wǎng)頁制作，軟文發(fā)布平臺，廣告投放等。10年來已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：18982081108，我們期待您的來電！
問題描述:由于采用angular做了網(wǎng)頁的單頁面應(yīng)用,需要一次性在主布局中將所有模塊需要引用到的js都引入.對于比較小的項目,這是可行的,但是對于大的項目,一旦js文件較多,在頁面首次加載時就引入所有js文件,無疑會延緩頁面加載的速度,造成不良額用戶體驗.那么分布加載(按需加載)就顯得很有必要了.
ui-router-lazyload
js代碼:
重慶分公司
重慶分公司
var myApp=angular.module("myApp",["ui.router","oc.lazyLoad"]);
myApp.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.when("","/home");
$stateProvider.state('home',{
url:"/home",
templateUrl: 'homepage.html',
resolve:{
loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {
return $ocLazyLoad.load({
name:"homeApp",
files:["homepage.js"]
})
}]
}
});
$stateProvider.state('index',{
url:"/home",
templateUrl:'index.html'
});
$stateProvider.state('child',{
url:"/child",
templateUrl:'child.html',
resolve:{
loadMyCtrl:function ($ocLazyLoad) {
return $ocLazyLoad.load({
name:'childApp',
files:["child.js"]
})
}
}
})
$stateProvider.state('third',{
url:"/third",
templateUrl:'third.html',
resolve:{
loadMyCtrl:function ($ocLazyLoad) {
return $ocLazyLoad.load({
name:'grandApp',
files:["third.js"]
})
}
}
})
});
myApp.controller("myController",function ($state,$scope,$location) {
$scope.turnPage=function () {
// $state.go('home');
$location.path('/home')
}
});
頁面初始效果如下圖,打開瀏覽器控制臺,可以看到child.js以及third.js在頁面載入時并沒有加載:
頁面初始化:
當(dāng)點擊子頁面和三級頁面時,會依次加載所依賴的js文件.實現(xiàn)分步加載.
點擊子頁面:
三級頁面:
填坑:網(wǎng)上關(guān)于angular按需加載的文章也蠻多的,也有人使用的是requireJS來進(jìn)行這個操作,而且ocLazyLoad的使用方法也有很多.之前按照一些文檔的方法,在配置路由時,加了下面的藍(lán)色代碼,頁面是能跳轉(zhuǎn),但是homepage.html的js代碼卻執(zhí)行了兩次,難道是控制器加載了兩次么.對于這個坑,我還在探索中,也希望大家能夠發(fā)表意見或者建議.
$stateProvider.state('home',{
url:"/home",
controller:'homeController',
templateUrl: 'homepage.html',
resolve:{
loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {
return $ocLazyLoad.load({
name:"homeApp",
files:["homepage.js"]
})
}]
}
});以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
