用角有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此:
问题描述:由于采用角做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入。对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验。那么分布加载(按需加载)就显得很有必要了。
& lt; !DOCTYPE html>
& lt; html lang=癳n”ng-app=癿yApp”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> ui-router-lazyload
& lt;链接rel="样式表" href=" https://www.yisu.com/bootstrap/dist/css/bootstrap.min.css "比;
& lt;脚本src=" https://www.yisu.com/angular/angular.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/angular-ui-router/release/angular-ui-router.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/oclazyload/dist/ocLazyLoad.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/index.js "祝辞& lt;/script>
& lt;/head>
& lt; style>
身体{
字体类型:“微软JhengHei UI”;
}
.navigator {
宽度:500 px;保证金:0汽车
}
李.navigator {
颜色:# 000;字体大小:14 px;
}
& lt;/style>
& lt;身体ng-controller=癿yController”比;
& lt; ul类=暗己狡鞯己絥av-pills”比;
& lt;李的作用=把菔尽眂lass=盎钤尽弊４? lt; a href=" https://www.yisu.com/zixun/#家”ng-click=癷sActive(事件)美元”在主页& lt;/a> & lt;/li>
& lt;李的作用=把菔尽眂lass=盎钤尽弊４? lt; a href=" https://www.yisu.com/zixun/#孩子”在子页面& lt;/a> & lt;/li>
& lt;李的作用=把菔尽眂lass=盎钤尽弊４? lt; a href=" https://www.yisu.com/zixun/第三" ng-click=癷sActive(事件)美元”在三级页面& lt;/a> & lt;/li>
& lt;/ul>
& lt; div ui视图祝辞& lt;/div>
& lt;/body>
& lt;/html>
之前
js代码:
var myApp=angular.module (“myApp”[“ui.router”、“oc.lazyLoad”]);
myApp。配置(功能(stateProvider, urlRouterProvider美元){
美元urlRouterProvider.when (“”、“/home”);
美元stateProvider.state(‘回家’,{
url:“/home”,
templateUrl:“homepage.html”,
解决:{
loadMyCtrl:(ocLazyLoad美元,函数(ocLazyLoad美元){
返回ocLazyLoad.load美元({
名称:“homeApp”,
文件(“homepage.js”):
})
})
}
});
美元stateProvider.state(“指数”,{
url:“/home”,
templateUrl:“index . html”
});
美元stateProvider.state(‘孩子’,{
url:“/子”,
templateUrl:“child.html”,
解决:{
loadMyCtrl:函数(ocLazyLoad美元){
返回ocLazyLoad.load美元({
名称:“childApp”,
文件(“child.js”):
})
}
}
})
美元stateProvider.state(“第三”,{
url:“/第三”,
templateUrl:“third.html”,
解决:{
loadMyCtrl:函数(ocLazyLoad美元){
返回ocLazyLoad.load美元({
名称:“grandApp”,
文件(“third.js”):
})
}
}
})
});
myApp。控制器(“myController”功能(状态、范围、美元美元位置){
美元的范围。turnPage=function () {//美元state.go('家');
location.path美元(/home)
}
});
之前
页面初始效果如下图,打开浏览器控制台,可以看到child.js以及third.js在页面载入时并没有加载:
,页面初始化:
当点击子页面和三级页面时,会依次加载所依赖的js文件。实现分步加载。
点击子页面:
三级页面:
