用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此:

问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了.

 <!DOCTYPE html>

 <html lang="en" ng-app="myApp">

 <head>

     <meta charset="UTF-8">

     <title>ui-router-lazyload</title>

     <link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.min.css">

     <script src="../angular/angular.min.js"></script>

     <script src="../angular-ui-router/release/angular-ui-router.min.js"></script>

     <script src="../oclazyload/dist/ocLazyLoad.min.js"></script>

     <script src="index.js"></script>

 </head>

 <style>

     body{

         font-family: "Microsoft JhengHei UI";

     }

     .navigator{

         width: 500px;margin: 0 auto

     }

     .navigator li{

        color: #000;font-size: 14px;

     }

 </style>

 <body ng-controller="myController">

 <ul class="navigator nav nav-pills">

     <li role="presentation" class="active"><a href="#home" ng-click="isActive($event)">主页</a></li>

     <li role="presentation" class="active"><a href="#child">子页面</a></li>

     <li role="presentation" class="active"><a href="#third" ng-click="isActive($event)">三级页面</a></li>

 </ul>

 <div ui-view style="width: 500px;margin: 50px auto 0"></div>

 </body>

 </html>


　　js代码:


 1 /**

  * Created by admin on 2016/7/15.

  */

 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在页面载入时并没有加载:


页面初始化:




当点击子页面和三级页面时,会依次加载所依赖的js文件.实现分步加载.


点击子页面:




三级页面:




填坑:网上关于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     });
												


											
angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js的更多相关文章
	

    
								
  1. win7,vs2010,asp.net项目中修改外部js文件，在调试时加载的还是旧文件
		
    win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...
    
		
    2. 
						
  2. 如何调试异步加载的js文件（浏览器调试动态加载js）
		
    描述 1:jQuery->var obj= new $.js_Obj():等异步加载js文件,执行方法. obj.method(): 2:页面估计不变,通过声明不同的js文件,进行页面内容的转换 ...
    
		
    3. 
						
  3. 延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）
		
    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
    
		
    4. 
						
  4. ASP.NET MVC 5 访问在views文件夹中的JS文件。 ASP.NET MVC html与JS分离
		
    修改VIEWS文件夹下的web.config文件, 加入下面红色字标识的内容:    <system.webServer>     <handlers>       <r ...
    
		
    5. 
						
  5. JQuery 加载 CSS、JS 文件
		
    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...
    
		
    6. 
						
  6. JS文件加载：比较async和DOM Script
		
    async与script动态加载都能使文件异步加载,本文叙述它们对页面渲染和load加载的影响方面. 目前我用demo.js作为执行文件操作.代码: var now = function() { re ...
    
		
    7. 
						
  7. 前端设计中关于外部js文件加载的速度优化
		
    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...
    
		
    8. 
						
  8. 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数
		
    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
    
		
    9. 
						
  9. 通过本地加载ga.js文件提高Google Anlytics性能
		
    Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里老是提到ga.js的状态为Aborted,说明ga虽然是异步跟踪,但某些情况下对网页性能与加载 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. codeforces 742D (分组背包)
			
    D. Arpa's weak amphitheater and Mehrdad's valuable Hoses   Just to remind, girls in Arpa's land are  ...
    
			
    2. 
						
  2. vue路由的简单实例
			
    vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...
    
			
    3. 
						
  3. 运动 js
			
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
    
			
    4. 
						
  4. python集合（set）操作
			
    python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), difference(差)和 ...
    
			
    5. 
						
  5. 支付宝App支付签名和验签
			
    代码: using CMS.Utility.ReturnResult; using OAuthWebAPI.Package; using Common; using System; using Sys ...
    
			
    6. 
						
  6. Fedora22编译Qt3.3.X
			
    FC22编译QT3 安装g++ dnf install gcc-c++ 1,configure ./configure -thread -no-nis -system-libpng -system-l ...
    
			
    7. 
						
  7. 在 JQuery Mobile 中实现瀑布流图库布局
			
    先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js: ...
    
			
    8. 
						
  8. [Arduino] Arduino猪头笔记
			
    1. 步进电机驱动 今天才发现....原来在不同的步进电机驱动模块里面,循环时钟是不一样的.... 步进电机驱动模块以及电路配置: 驱动代码的主要部分: int sp_param = 16383; d ...
    
			
    9. 
						
  9. 6. Adapter Class/Object（适配器）
			
    意图: 将一个类的接口转换成客户希望的另外一个接口.Adapter 模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 适用性: 你想使用一个已经存在的类,而它的接口不符合你的需求. 你想 ...
    
			
    10. 
						
  10. appcan切换帐号无法提交SVN
			
     C:\Documents and Settings\Administrator\Application Data\Subversion\auth\svn.simple 
    
			
    11.