在 Angular 4 中加载功能模块（4）练习 3：预加载

look_w

练习 3：预加载除了等待用户调用辅助模块的路径，有时预先加载这些模块更高效。在这种情况下，在贪婪加载主要模块后，路由器开始预加载标有 loadChildren        属性的所有剩余模块。
要为预加载重新配置应用程序，可编辑您的 app-routing.module.ts，如下所示。下面的代码导入了预加载模块并调用它们的功能。
清单 5. 原始 app-routing.module.ts          的一节

import { Routes, RouterModule } from '@angular/router';

清单 6. 更新后的 app-routing.module.ts          的一节

import { Routes, RouterModule, PreloadAllModules } from '@angular/router';

清单 7. 原始 app-routing.module.ts          的一节

imports:[RouterModule.forRoot(appRoutes)],

清单 8. 更新后的 app-routing.module.ts          的一节

imports:[RouterModule.forRoot(appRoutes, {preloadingStrategyreloadAllModules})],

保存更新后的文件，然后运行该应用程序。在 Chrome 浏览器中重新加载该应用程序，然后转到 Chrome 开发人员工具的 Network 和 Sources          选项卡。x.chunk.js 和 y.chunk.js          文件应紧接着主应用程序后被加载，使辅助模块在用户单击这些菜单之前就已可用。参见 Angular4PreLoadModules.zip        中的示例应用程序，更详细地了解预加载。