用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. nth_element 测试程序
			
    /******************************************************************** created: 2014/04/29 11:35 file ...
    
			
    2. 
						
  2. codeforces 742E (二分图着色)
			
    E. Arpa's overnight party and Mehrdad's silent entering Note that girls in Arpa's land are really at ...
    
			
    3. 
						
  3. vertical-align 垂直居中
			
    基线:字母‘x’的底部: 中线:与基线的距离为小写字母x高度的一半(即0.5ex),而ex同font-size相关,大部分浏览器认为1ex = 0.5em(em同样也是相对单位,不是绝对单位),因此会 ...
    
			
    4. 
						
  4. iphone中button按钮显示为圆形解决
			
    iphone中button按钮显示为圆形解决: 添加样式: -webkit-appearance:button; 如果需要为直角: border-radius:0 在源码中添加如:style=&quo ...
    
			
    5. 
						
  5. 修复IE9.0下PlaceHolder  属性问题js脚本
			
    在开发前端系统时候碰到这种兼容问题,以下是个人解决方案,希望能给其他人带来帮助: var JPlaceHolder = { //检测 _check: function () { return 'pla ...
    
			
    6. 
						
  6. 延迟对象$q和供应商配置config
			
    1.angular总的$q和jquery中的延迟对象很类似,用法也差不多 m1.controller('meng',['$scope','$q',function($scope,$q){ var df ...
    
			
    7. 
						
  7. 关闭ctrl+shift+d截图
			
    关闭ctrl+shift+d截图,最近用sublime text3的时候,用ctrl+shift+d,总是跳出来截图,找了半天,原来是百度浏览器的截图功能快捷键是ctrl+shift+d, 关掉即可
    
			
    8. 
						
  8. 快速排序 - C语言
			
    看了这本<数据结构与算法分析>中的快速排序. 写下自己理解后的代码,以备后用. #include "stdio.h" void insertSort(int arr[] ...
    
			
    9. 
						
  9. some things
			
    ////html[1]/body[1]/div[9]/div[1]/div[1]/div[1]/ul/li  截取规则 Articles/Article[1]:选取属于Articles子元素的第一个A ...
    
			
    10. 
						
  10. jQuery常用的插件及功能汇总-持续
			
    1.图片轮播 jquery.soChange.js 2.滚动展示 MSClass.js 3.md5加密 md5.js 4.cookie操作 cookie.js 5.
    
			
    11.