浅谈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 相关文章推荐
深入理解javascript变量声明
Nov 20 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
微信小程序实现多图上传
Jun 19 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
php生成excel列序号代码实例
2013/12/24 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
小程序实现tab标签页
2020/11/16 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Python中文字符串截取问题
2015/06/15 Python
Django中使用Celery的教程详解
2018/08/24 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
秋季运动会开幕词
2015/01/28 职场文书
无保留意见审计报告
2015/06/05 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
MySQL自定义函数及触发器
2022/08/05 MySQL