浅谈angular懒加载的一些坑


Posted in Javascript onAugust 20, 2016

写在前面

最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下.

项目背景:

项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载.

工具类:

项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成angular模块的懒加载.

项目进程:

模块打包

项目中代码基本按照AMD规范来编写,使用grunt-contrib-requirejs来将每一个模块压缩到一个js文件中.

问题一:在项目代码中,各个模块都会依赖第三方库/项目中公共服务/项目中公共指令,如果不对这部分内容进行处理的话, grunt-contrib-requirejs会在压缩每个模块的时候,将其依赖的所有模块都加载过来,然后压缩到同一个js文件中.

应对:将第三方库/公共服务和指令分别压缩为三个模块,然后每个模块的打包脚本中使用” exclude”将其移除.如下图所示:

浅谈angular懒加载的一些坑

需要注意的是,公共模块的模块名 需要在相应的路径下有同名的js文件

按需加载

将脚本按模块打包为一个个的js文件后,下一步的工作就是将根据用户请求来加载不同的模块,项目用使用ui-router来处理路由跳转,可以从route入手来完成模块的懒加载.

具体方法是:在用户操作路由跳转时,根据用户要跳转到的state,去加载此state所属的模块.基于此,需要添加一个state和模块之间的映射,最开始的时候使用requireJS来加载,发现脚本可以加载进来,但是angular中注册的控制器/services/filter等均不起作用.调查发现,angular在调用bootstrap方法之后注册的控制器之类的服务不会再被调用.基于此,引入ocLazyLoad来加载(ocLazyLoad对angular源码有一些注入修改).

至此为止,基本实现按需加载,但还有以下几个问题:

模块之间项目依赖

因为存在一些模块之间项目之间有强依赖,对此的处理是在配置文件中添加模块之间的依赖关系,在加载某个模块之前查看其是否有依赖模块,如果有的话,优先加载其依赖模块,待依赖模块加载完成后再去加载当前模块

指令懒加载;

Angular中可以通过$compile来实现指令之间的相互依赖,对此的处理是配置指令名和指令模块的依赖,当用到某个指令的时候,先去加载其模块,然后执行编译方法.这种解决方案能解决大部分的指令依赖.

指令的位置问题.项目中大多用到的都是长页面,每一个长页面划分为若干个区域,每一个区域都是一个指令.使用拦截的时候会有一个问题,就是每个指令加载时间的长短不一样,先回来的指令会优先append到dom上,从而导致页面布局的不确定性.解决方案是,使用deffer机制,待所有指令加载/编译完成后,再往dom树上添加执行.

指令之间的依赖:指令之间也存在项目依赖,对此的解决方案是将相互依赖的指令合并为一个模块,打包到同一个脚本文件中.这个方案能解决大部分的指令依赖,但是无法解决初始化过程中的依赖.可能存在某个指令编译的时候,其依赖的指令还未完成编译.对于这样的超级特殊例子,只有在页面初始化的时候加载脚本和template.

以上就是在整个项目进程中遇到的问题,基本每前进一次都是踩着坑,好多东西都是第一次接触,感觉还是学到了一些东西.可能好多问题的解决方案不是很明确.以上所有问题其他人都遇到过,只要用好搜索引擎,加上自己好好阅读/理解别人的代码.所有问题都可以得到圆满的解决

关于这篇浅谈angular懒加载的一些坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js不是基础的基础
Dec 24 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
javascript canvas API内容整理
Feb 16 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 #Javascript
js显示动态时间的方法详解
Aug 20 #Javascript
javascript数字验证的实例代码(推荐)
Aug 20 #Javascript
javascript之IE版本检测超简单方法
Aug 20 #Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 #Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 #Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
合作指挥官:孟斯克
2020/03/16 星际争霸
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
js+css实现打字效果
2020/06/24 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python简单实现旋转图片的方法
2015/05/30 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
Python sep参数使用方法详解
2020/02/12 Python
PyQt实现计数器的方法示例
2021/01/18 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
《七颗钻石》教学反思
2014/02/28 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
道路建设实施方案
2014/03/18 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
正则表达式基础与常用验证表达式
2022/06/16 Javascript