角加载中的一些凹坑
最近我们在工作中接触了角模块包的一些内容,感觉中间有一个凹坑,在这里做记号。
项目背景:
该项目主要采用AngularJS作为前端框架,该项目将在年底前发布的脚本都打包成一个文件,加载页时,第一次,由初始页面加载引起的缓慢,在此基础上,提出了按需加载,即只有当用户访问一个模块,该模块的脚本将加载。
工具类:
该项目采用咕噜包根据AMD的规范,使用咕噜requirejs压缩合并模块,并使用oclazyload完成角模块的延迟加载。
项目过程:
模块化包装
项目中的代码基本上是写在与AMD的规范一致,用咕噜requirejs压缩每个模块到一个js文件。
问题一:在项目中的代码,每个模块将依靠第三方库 /项目/公共服务项目的公共教育,如果没有这部分的处理,requirejs咕噜中各模块的压缩,所有模块都装在背上,然后压缩成一个js文件。
答:第三方图书馆/公共服务和指令被压缩为三个模块,然后每个模块打包在脚本中,通过使用排除将其删除。
需要注意的是,公共模块的模块名需要在相应路径下具有相同名称的js文件。
负载需求
在脚本被模块化为js文件之后,下一步是根据用户请求加载不同的模块。该项目使用UI路由器处理路由和跳转,并可以从路由开始延迟加载模块。
具体的方法是:在用户路由操作中跳转,根据用户跳转到状态,加载状态模块。基于此,你需要添加状态和requirejs模块之间的映射,用于负荷开始,发现脚本可以装入,但注册角控制器/服务/过滤不。调查发现,在控制器中注册的角,然后调用服务的引导方法将不再被调用。在此基础上,对oclazyload介绍(角源代码加载一些注射的变化oclazyload)。
到目前为止,基本实现是按需进行的,但有以下问题:
模块之间的项目依赖关系
因为项目之间的模块数量有很强的依赖关系,这种处理方法是在配置文件中添加模块之间的依赖关系,然后加载模块,看看是否有依赖模块(如果有的话)依赖于加载优先级模块,在加载当前模块之前依赖模块加载完成。
指令延迟加载;
通过元编译实现指令间的相互依赖可以是角度,这个过程依赖于配置指令和指令模块,当用于命令时,首先加载模块,然后执行编译器的方法。这个解可以解决大多数的顺序依赖。
指令的位置问题。项目中大多使用的是长页面,每个页面分为几个区域,每个区域都是一个命令。使用截取时,有一个问题,即每个指令加载时间与后面的长度不一样,首先会优先添加DOM指令,从而导致页面布局的不确定性。解决方法是使用不同的机制来加载/所有指令编译完成后,添加DOM树。
指令之间的依赖性:指令之间存在项目依赖关系,这个解决方案是将每个指令依赖于一个模块,打包成相同的脚本文件。该方案可以解决大部分的指令依赖,但不能解决依赖初始化过程。可能有一个指令编译器。从属指令尚未完成编译。对于这个超级特例,只有在页面加载脚本和模板时。初始化
以上就是在整个项目过程中遇到的问题,基本上每一次前进都是一步一步地前进,很多人都是第一次接触,感觉到或者学到了一些东西。许多问题的可能解决办法不是很清楚。以上所有的人都遇到过问题,只要使用搜索引擎,再加上自己良好的阅读理解别人的代码。所有问题都能令人满意地解决。
关于这个角懒加载一些坑是萧边和大家分享的内容,希望能给大家一个参考,我希望你能支持更多。