100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > angular模块预加载

angular模块预加载

时间:2024-06-24 15:00:56

相关推荐

angular模块预加载

延迟加载使得首屏加载的资源包的大小减小很多,这些模块只在用户触发的时候才开始加载。但对于某些模块来说,触发时才加载可能不是最优的解决方案。这样的模块虽然不需要首屏加载,但可能有很大的概率用户会访问使用到,因此最好不用等待用户触发,而是在首屏资源加载完后立即加载,这种加载模式就叫作预加载。预加载的模块首先得是一个延迟加载的模块,让所有延迟加载的模块加上预加载功能非常简单,只需在根模块的RouterModule中添加一个preloadingStrategy配置项即可。示例代码如下:

加上这个配置后,所有的延迟加载模块将不再等待用户触发,而是等待首屏资源加载完后立即加载。不过,这样的配置显然不够灵活,更好的方式是对预加载的策略做自定义配置。开发者可以通过实现Angular提供的PreloadingStrategy接口自定义预加载策略。首先定义一个服务,并实现PreloadingStrategy接口。示例代码如下:

preload()方法的返回类型必须是一个Observable对象,Angular会遍历每一个route对象并执行preload()函数,以此来判断该route对应的模块是否需要进行预加载。它接受两个参数:

route:当前处理中的route对象。

load:内置异步模块加载器函数。上面这个例子直接返回Observable.of(null),表示不进行预加载。

MyPreloadingStrategy这个服务的目的是进行有选择的预加载,可以根据route对象里的data属性提供的信息进行判断。示例代码如下:

如果data对象里设置了preload为true,preload函数即返回load()加载器函数,这表示该路由对应的模块需要进行预加载。这个MyPreloadingStrategy服务已经完成了,下面需要把原来的PreloadAllModules替换成新的MyPreloadingStrategy。示例代码如下:

然后依据这个规则,控制模块预加载就变得非常简单了。在需要预加载的延迟加载路由配置项里进行配置:

在这个route对象里设置preload为true后,OperateModule的加载方式由原来的延迟加载变更为预加载,而其他延迟加载模块并不会受到影响,还是会等待用户触发时才加载。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。