angularjs ocLazyLoad分步加载js文件实例


Posted in Javascript onJanuary 17, 2017

用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代码:

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

 页面初始化:

angularjs ocLazyLoad分步加载js文件实例

angularjs ocLazyLoad分步加载js文件实例

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

点击子页面:

angularjs ocLazyLoad分步加载js文件实例

angularjs ocLazyLoad分步加载js文件实例

三级页面:

angularjs ocLazyLoad分步加载js文件实例

angularjs ocLazyLoad分步加载js文件实例

 填坑:网上关于angular按需加载的文章也蛮多的,也有人使用的是requireJS来进行这个操作,而且ocLazyLoad的使用方法也有很多.之前按照一些文档的方法,在配置路由时,加了下面的蓝色代码,页面是能跳转,但是homepage.html的js代码却执行了两次,难道是控制器加载了两次么.对于这个坑,我还在探索中,也希望大家能够发表意见或者建议.

$stateProvider.state('home',{
     url:"/home",

 controller:'homeController',
     templateUrl: 'homepage.html',
     resolve:{
       loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {
         return $ocLazyLoad.load({
           name:"homeApp",
           files:["homepage.js"]
         })
       }]
     }
  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
js实现简单的倒计时
Jan 28 Javascript
微信小程序 登陆流程详细介绍
Jan 17 #Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 #Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 #Javascript
js处理层级数据结构的方法小结
Jan 17 #Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 #Javascript
JavaScript的事件机制详解
Jan 17 #Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 #Javascript
You might like
php 数学运算验证码实现代码
2009/10/11 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
python获取网页状态码示例
2014/03/30 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python heapq使用详解及实例代码
2017/01/25 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
python 自动重连wifi windows的方法
2018/12/18 Python
关于python字符串方法分类详解
2019/08/20 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
js实现弹框效果
2021/03/24 Javascript
企业门卫岗位职责
2013/12/12 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL