angularjs ocLazyLoad分步加載js文件,angularjs ocLazyLoad按需加載js

時間 2019-11-09

標籤 angularjs oclazyload 加載文件按需欄目 AngularJS 简体版

原文原文鏈接

用angular有一段時間了,平日裏只顧着寫代碼,沒有注意到性能優化的問題,而今有時間,因而捋了捋,講學習過程記錄於此:

問題描述:因爲採用angular作了網頁的單頁面應用,須要一次性在主佈局中將全部模塊須要引用到的js都引入.對於比較小的項目,這是可行的,可是對於大的項目,一旦js文件較多,在頁面首次加載時就引入全部js文件,無疑會延緩頁面加載的速度,形成不良額用戶體驗.那麼分佈加載(按需加載)就顯得頗有必要了.
css

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="myApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ui-router-lazyload</title>
 6     <link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.min.css">
 7     <script src="../angular/angular.min.js"></script>
 8     <script src="../angular-ui-router/release/angular-ui-router.min.js"></script>
 9     <script src="../oclazyload/dist/ocLazyLoad.min.js"></script>
10     <script src="index.js"></script>
11 </head>
12 <style>
13     body{
14         font-family: "Microsoft JhengHei UI";
15     }
16     .navigator{
17         width: 500px;margin: 0 auto
18     }
19     .navigator li{
20        color: #000;font-size: 14px;
21     }
22 </style>
23 <body ng-controller="myController">
24 <ul class="navigator nav nav-pills">
25     <li role="presentation" class="active"><a href="#home" ng-click="isActive($event)">主頁</a></li>
26     <li role="presentation" class="active"><a href="#child">子頁面</a></li>
27     <li role="presentation" class="active"><a href="#third" ng-click="isActive($event)">三級頁面</a></li>
28 </ul>
29 <div ui-view style="width: 500px;margin: 50px auto 0"></div>
30 </body>
31 </html>

　　js代碼:html


 1 /**
 2  * Created by admin on 2016/7/15.
 3  */
 4 var myApp=angular.module("myApp",["ui.router","oc.lazyLoad"]);
 5 myApp.config(function ($stateProvider,$urlRouterProvider) {
 6     $urlRouterProvider.when("","/home");
 7     $stateProvider.state('home',{
 8         url:"/home",
 9         templateUrl: 'homepage.html',
10         resolve:{
11             loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {
12                 return $ocLazyLoad.load({
13                     name:"homeApp",
14                     files:["homepage.js"]
15                 })
16             }]
17         }
18     });
19     $stateProvider.state('index',{
20         url:"/home",
21         templateUrl:'index.html'
22     });
23     $stateProvider.state('child',{
24         url:"/child",
25         templateUrl:'child.html',
26         resolve:{
27             loadMyCtrl:function ($ocLazyLoad) {
28                 return $ocLazyLoad.load({
29                     name:'childApp',
30                     files:["child.js"]
31                 })
32             }
33         }
34     })
35     $stateProvider.state('third',{
36         url:"/third",
37         templateUrl:'third.html',
38         resolve:{
39             loadMyCtrl:function ($ocLazyLoad) {
40                 return $ocLazyLoad.load({
41                     name:'grandApp',
42                     files:["third.js"]
43                 })
44             }
45         }
46     })
47     
48 });
49 myApp.controller("myController",function ($state,$scope,$location) {
50     $scope.turnPage=function () {
51         // $state.go('home');
52         $location.path('/home')
53     }
54 });

頁面初始效果以下圖,打開瀏覽器控制檯,能夠看到child.js以及third.js在頁面載入時並無加載:bootstrap

頁面初始化:瀏覽器

當點擊子頁面和三級頁面時,會依次加載所依賴的js文件.實現分步加載.性能優化

點擊子頁面:app

三級頁面:ide

填坑:網上關於angular按需加載的文章也蠻多的,也有人使用的是requireJS來進行這個操做,並且ocLazyLoad的使用方法也有不少.以前按照一些文檔的方法,在配置路由時,加了下面的藍色代碼,頁面是能跳轉,可是homepage.html的js代碼卻執行了兩次,難道是控制器加載了兩次麼.對於這個坑,我還在探索中,也但願你們可以發表意見或者建議.佈局

$stateProvider.state('home',{
 8  url:"/home",
　　　　　　 controller:'homeController', 9  templateUrl: 'homepage.html', 10  resolve:{ 11  loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) { 12  return $ocLazyLoad.load({ 13  name:"homeApp", 14  files:["homepage.js"] 15  }) 16  }] 17  } 18  });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。