什么是延迟加载?如何在Angular 2中启用延迟加载?

terry Angular 146

大多数企业应用程序包含用各式各样的用于特定业务案例的模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大的性能开销。延迟加载使我们只加载用户正在交互的模块,而其余的模块会在运行时按需加载。

延迟加载通过将代码拆分成多个包并以按需加载的方式,来加速应用程序初始加载过程。

每个Angular应用程序必须有一个叫AppModule的主模块。代码应该根据应用程序业务案例分为不同的子模块(NgModule)。

启用延迟加载的Plunkr示例: 

  1. 我们不需要在根模块中导入或声明延迟加载模块。
  2. 将路由添加到顶层路由(app.routing.ts)并设置loadChildren。loadChildren会从根文件夹中获取绝对路径。RouterModule.forRoot()会获取routes数组并配置路由器。
  3. 在子模块中导入模块特定路由。
  4. 在子模块路由中,将路径指定为空字符串“”,也就是空路径。RouterModule.forChild会再次采用路由数组为子模块组件加载并配置路由器。
  5. 然后,导出const路由:ModuleWithProviders = RouterModule.forChild(routes);
  • 暂无回复内容