浅谈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懒加载的一些坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论