浅谈angular懒加载的一些坑  更新时间:2016年08月20日 10:31:57   投稿:jingxian   下面小编就为大家带来一篇浅谈angular懒加载的一些坑。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成angular模块的懒加载. 项目进程: 模块打包 项目中代码基本按照AMD规范来编写,使用grunt-contrib-requirejs来将每一个模块压缩到一个js文件中. 问题一:在项目代码中,各个模块都会依赖第三方库/项目中公共服务/项目中公共指令,如果不对这部分内容进行处理的话, grunt-contrib-requirejs会在压缩每个模块的时候,将其依赖的所有模块都加载过来,然后压缩到同一个js文件中. 应对:将第三方库/公共服务和指令分别压缩为三个模块,然后每个模块的打包脚本中使用” exclude”将其移除.如下图所示: 需要注意的是,公共模块的模块名 需要在相应的路径下有同名的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懒加载的一些坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。 您可能感兴趣的文章: Angular性能优化之第三方组件和懒加载技术 基于angular6.0实现的一个组件懒加载功能示例 浅谈Angular2 模块懒加载的方法 angular实现图片懒加载实例代码 Angular懒加载机制刷新后无法回退的快速解决方法 Angular懒加载动态创建显示该模块下声明的组件 angular 懒加载 相关文章 angular异步验证防抖踩坑实录 这篇文章主要给大家介绍了关于angular异步验证防抖踩坑的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2019-12-12 学习AngularJs:Directive指令用法(完整版) 这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 2016-04-04 AngularJS 单元测试(二)详解 这篇文章主要介绍了AngularJS 单元测试(二)的相关资料,需要的朋友可以参考下 2016-09-09 js常用正则表达式集锦 这篇文章主要介绍了js常用正则表达式集锦,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-05-05 浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象) 今天小编就为大家分享一篇浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 Angular2 自定义表单验证器的实现方法 这篇文章主要介绍了Angular2 自定义表单验证器的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 Angular之jwt令牌身份验证的实现 这篇文章主要介绍了Angular之jwt令牌身份验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2020-02-02 AngularJS API之copy深拷贝详解及实例 这篇文章主要介绍了AngularJS API之copy深拷贝详解及实例的相关资料,需要的朋友可以参考下 2016-09-09 Angular实现搜索框及价格上下限功能 这篇文章主要为大家详细介绍了Angular实现搜索框及价格上下限功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2018-01-01 Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法 今天小编就为大家分享一篇Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 最新评论

写在前面

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

项目背景:

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

工具类:

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

项目进程:

模块打包

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

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

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

需要注意的是,公共模块的模块名 需要在相应的路径下有同名的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懒加载的一些坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • Angular性能优化之第三方组件和懒加载技术
  • 基于angular6.0实现的一个组件懒加载功能示例
  • 浅谈Angular2 模块懒加载的方法
  • angular实现图片懒加载实例代码
  • Angular懒加载机制刷新后无法回退的快速解决方法
  • Angular懒加载动态创建显示该模块下声明的组件
张贴在3