Angular Router-模块预加载

翻译/大漠穷秋

摘要: Angular Router-模块预加载

 

原文点这里Victor Savkin 是Angular核心团队成员,路由模块就是他开发的。

 

懒加载机制会把应用切分成多个bundle(包、块)然后按需加载,从而提升加载速度。我们在设计路由机制的时候就考虑了对懒加载的支持,并且这种支持是透明的,你可以轻松选择是否需要启用懒加载。

当然,懒加载也有自己的问题,那就是当用户导航到启用了懒加载的模块的时候,路由不得不即时到服务器上去获取所需要的模块,而这个过程需要消耗一些时间。

为了解决这个问题,我们引入了预加载机制。现在,在用户与应用交互的过程中,路由可以在后台悄悄地预先加载那些需要懒加载的模块。

本文是以Angular 2 Router 这本书为基础的,你可以在以下链接找到这本书https://leanpub.com/router 。这本书的内容远胜于入门手册,它深入解析了关于路由的方方面面。心智模型、设计约束,以及API里面的各种细节,可以说无所不包。如果你觉得这篇文章不错,强烈推荐去看看这本书!

 

以下是它的工作原理。

我们首先加载初始模块,这个模块里面只包含启动应用所必需的组件。这样可以保持这个模块尽可能的快。

然后,我们就用这个很小的代码块启动应用。

这时候,应用已经开始运行起来了,用户已经可以进行交互了。与此同时,我们在后台预加载其它模块。

最后,当用户点击一个需要懒加载的模块链接的时候,导航可以瞬间完成。

这样我们就同时获得了两种方式带来的好处:初始加载时间尽可能地短,而随后的导航又足够快。

 

启用预加载

为了启用预加载,我们需要给forRoot方法传递一个预加载策略。

最新版本的路由内置了两种策略:不进行预加载、预加载所有模块。当然,你也可以提供你自己的策略。实际上这样做比看起来的更加简单。

 

自定义预加载策略

假设我们不想预加载所有模块,可以在路由的配置项里面明确指定需要预加载什么内容。

我们从创建自定义预加载策略开始。

preload方法可以接受2个参数:第一个参数是route;第二个参数是一个函数,它会实际负责预加载工作。在这个函数里面,我们会检查一下preload属性是不是被设置成了true。如果是,我们就会调用load函数。

最后,为了启用这个自定义策略,我们需要把它添加到providers列表里面并传递给RouterModule.forRoot。

 

学习更多

如果你想要学习更多关于Angular路由方面的内容,请检出我写的关于这个主题的书:

https://leanpub.com/router.

● Angular Router

● Declarative Lazy Loading

本文来源:https://my.oschina.net/mumu/blog/781278


如果给你带来帮助,欢迎微信或支付宝扫一扫,赞一下。