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

赞 (0)

相关推荐

  • angular实现图片懒加载实例代码

    这两天一直纠结angular的图片懒加载插件中无法自拔.在使用过程深深感到js学艺不精的痛苦,想修改源码又不会修改,只能尽力压榨如何使用插件上.这里主要谈谈在使用插件的过程遇到的一些问题. 一)我使用的是angular-imglazyload这个插件.[https://www.npmjs.com/package/angular-imglazyload]主要是这个插件小不依赖jquery库,然后下载源码运行成功后,我就整合到自己项目上运行,结果发现竟然只有前2张加载了,滚动了都没有反映.下面是我的

  • 浅谈Angular2 模块懒加载的方法

    浅谈Angular2 模块懒加载的方法

    当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经把整个项目加载进来了.所以,很有必要根据业务将不同的功能分模块,以便Angular2按需加载,提升用户体验. 下面的例子是将首页放到home模块里,访问/home时加载home模块内容,仅供学习懒加载,其实首页访问路径应该是/ 先看项目文件结构: home模块放到src/app/home目录下,里面的home目录是home组件. home模块有单独的定义和路由(home.module.ts,home-ro

  • Angular懒加载机制刷新后无法回退的快速解决方法

    Angular懒加载机制刷新后无法回退的快速解决方法

    今天在项目中遇到一个很奇怪的问题,使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无法回到上一个state(单击回退按钮 ui-routre的 $stateChangeStart 事件都不会触发),当然这只是猜测,由于事件关系也没有去深入的探究源码. angular懒加载机制刷新后无法回退的解决方案 : 通过查看angular(ionic)的源码发现$browser这个服务上有个on

  • 浅谈angular懒加载的一些坑

    浅谈angular懒加载的一些坑

    写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang

  • 浅谈hibernate急迫加载问题(多重外键关联)

    数据库结构如下 strategy中有外键member_id(关联member表)外键strategy_category(关联category表)而member表中有外键position_id(关联positons表) 如果前台页面直接查询stategy表中内容我们hql语句如果这么写 Stringhql="FromStrategywhereid=:id"; 控制台会报nosession错误这是因为hibernate默认懒加载只有我们需要的时候才会将关联的对象加载出来这里在我们前台需要取

  • Angular懒加载动态创建显示该模块下声明的组件

    Angular懒加载动态创建显示该模块下声明的组件

    目录 环境: Angular 13.x.x 新建一个angular项目 懒加载工具栏组件 toolbar.module.ts toolbar.component.ts toolbar.component.html app.component.ts 环境: Angular 13.x.x angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组件我不希望它默

  • 浅谈Django2.0 加xadmin踩的坑

    如果是django2.0 必须下载xadmin2.0 不然很多地方不兼容 xadmin2.0下载地址 https://github.com/sshwsfc/xadmin/tree/django2 然后下载到本地 通过pip install xadmin本地地址 比如 xadmin包在 C:\Users\ASUS\Desktop\xadmin-django2.zip 就 pip install C:\Users\ASUS\Desktop\xadmin-django2.zip 楼主直接把包里的xad

  • 浅谈Vue的加载顺序探讨

    在Vuejs 1.0版本中,如果父子组件进行配合,它们的生命周期执行具有如下特点: 1. created总是先父后子 生命周期函数created总是按照从父到子的顺序依次执行,但是兄弟之间没有严格按照这样的顺序执行,估计是采用了异步函数,不仅如此,子组件在父组件中的插入顺序也是随机的,并没有什么特别的规律.假定子组件的引用顺序如下: <div class="container"> <child-c1 v-ref:child1></child-c1>

  • 浅谈Spring Context加载方式

    Spring 加载方式 对于可执行文件方式,我们一般的加载Spring 配置的方式是 ClassPathXmlApplicationContext public static void main(String[] args) { ClassPathXmlApplicationContext xmlApplicationContext = new ClassPathXmlApplicationContext("classpath:spring-context.xml"); DemoSer

  • 浅谈SpringBoot Bean加载优先级的问题

    目录 Bean加载优先级的问题 同一个类中加载顺序 @DependsOn控制顺序 @Order不能控制顺序 Spring控制Bean加载顺序 使用Spring @Order控制bean加载顺序 使用Spring @DependsOn控制bean加载顺序 小结一下 Bean加载优先级的问题 spring容器载入bean顺序是不确定的,spring框架没有约定特定顺序逻辑规范.但spring保证如果A依赖B(如beanA中有@Autowired B的变量),那么B将先于A被加载. 同一个类中加载顺序

  • 基于angular6.0实现的一个组件懒加载功能示例

    我们常常会遇到这样一个问题,当我们使用一个第三方控件库的时候,我们只用到了其中 1 个或某几个组件,会连带一大堆无用的东西,造成体积臃肿不堪.又或者首页用到的组件较多,首页加载速度缓慢,这个时候,我们或许需要加载用户可视范围内用到的组件,随着用户的浏览下拉,我们再去加载这些组件,渐进式加载,渐进式体验,这个时候你或许就用到了本工具所实现的功能.或者一个页面的某些不重要区域,比如第三方广告又或者不重要的元素,可以采用懒加载懒渲染,降低用户首屏等待时间.一切都在用户不知不觉中进行.大大增加用户体验,

  • 浅谈解决Hibernate懒加载的4种方式

    浅谈解决Hibernate懒加载的4种方式

    本文总结了我在学习hibernate的过程中,解决hibernate懒加载问题的四种方式. 所谓懒加载(lazy)就是延时加载,延迟加载. 什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载. 至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适,因为内存容量有限,为了减少并发量,减少系统资源的消耗,我们让数据在需要的时候才进行加载,这时我们就用到了懒加载. 例如,有一个对象是Employee,还有一个对象是Department.显然,对于Employee相对Depa

随机推荐