练习 2：惰性加载
假设多个团队正在为此应用程序开发模块。您的离岸团队刚交付了 Weather 和 Currency 模块。您的任务是将新模块合并到主应用程序中。
从应用程序源代码中解压 Angular4LazyLoadModules 文件（位于 Angular4TutorialSrc.zip 中）。将 weather 和 currency 文件夹复制到您的主应用程序目录中，如下所示。
图 8. 将辅助模块添加到主应用程序目录
您的下一个任务是告诉 Angular 为 Weather 和 Currency 模块实现惰性加载。要将新模块添加到基础应用程序中，可以编辑 app-routing.module.ts，如下所示：
清单 1. 原始 app-routing.module.ts 的一节
代码语言：javascript复制const appRoutes: Routes = [
{ path: '', redirectTo: '/markets', pathMatch: 'full' },
{ path: 'markets', component: MarketsComponent },
{ path: 'sports', component: SportsComponent }
];清单 2. 更新后的 app-routing.module.ts 的一节
代码语言：javascript复制const appRoutes: Routes = [
{ path: '', redirectTo: '/markets', pathMatch: 'full' },
{ path: 'markets', component: MarketsComponent },
{ path: 'sports', component: SportsComponent },
{ path: 'weather', loadChildren: './weather/weather.module#WeatherModule' },
{ path: 'currency', loadChildren: './currency/currency.module#CurrencyModule' }
];更新后的代码告诉 Angular，在用户请求时加载辅助模块。请注意，weather 模块的 loadChildren 属性被设置为 WeatherModule 的地址。该地址是 WeatherModule 的文件位置（相对于应用程序根目录），后跟 # separator，再后面是已导出的模块类的名称 WeatherModule。Currency 模块的配置完全相同。
当路由器导航到更新后的地址时，它会使用 loadChildren 字符串动态加载 WeatherModule 或 CurrencyModule。第一次请求某个新路径时，会惰性加载该模块并重新配置应用程序路径。然后该路径立即可供后续请求使用。
更新 UI
接下来，将会更新用户界面。在您的应用程序目录中找到文件 app.component.html，将光标放在以下语句下方：
清单 3. 原始 app.component.html 的一节
代码语言：javascript复制<li routerLinkActive="active">
<a routerLink="/sports">Sports</a>
</li>在该语句下插入以下代码：
清单 4. 更新后的 app.component.html 的一节
代码语言：javascript复制<li class="dropdown">
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">
Weather
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li routerLinkActive="active">
<a [routerLink]="['/weather/yahoo']">Yahoo! Weather</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="['/weather/facts']">Weather Facts</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="['/weather/globalwarming']">Global Warming</a>
</li>
</ul>
</li>
<li routerLinkActive="active">
<a routerLink="/currency">Currency</a>
</li>现在用户将会看到并能单击 Weather 和 Sports 应用程序区域的新菜单。请注意，Weather 有 3 个子菜单。
保存文件内容，然后发出命令 ng serve 来运行该应用程序。
图 9. 该应用程序正在运行
现在检查执行 ng serve 命令后的应用程序输出。您会看到两个针对 “chunk” 文件的新行，它们是被 angular-cli 自动添加的。这些行表示您惰性加载的模块。
浏览器中的应用程序现在应包含 Weather 和 Currency 菜单，如图 10 所示。
图 10. 右上角的 Weather 和 Currency 菜单
幕后过程
在继续操作之前，我们看看此加载机制的细节。首先在 Chrome 浏览器中运行该应用程序。在 Windows 机器上，按下 Fn F12。在 Mac 上，按下 Command->alt->i。单击 Network 选项卡并等待页面加载。单击 Weather 或 Currency 链接前，查看下面的图 11 （第 1 列）和图 12（第 1 列）。
图 11. 测试和调试期间可用的源代码
图 12. 网络相关信息
这些图显示了贪婪加载的模块 AppModule 和 BaseModule。可以看到 Weather 和 Currency 模块尚未加载。
现在尝试单击 Currency 菜单，查看图 11（第 2 列）和图 12（第 2 列）中的 Sources 和 Network 选项卡。您会看到 Currency 模块 (module(y.chunk.js)) 已加载。但是，Weather 模块尚未加载。单击 Weather，然后单击 Weather 子菜单下的一个菜单项。参见图 11（第 3 列）和图 12（第 3 列），您现在应看到 Weather 模块 (module(x.chunk.js)) 也已加载。
请注意，x 和 y 块分别有一个整数值；惰性加载机制通过它们获知要加载这些模块。
练习 3：预加载
除了等待用户调用辅助模块的路径，有时预先加载这些模块更高效。在这种情况下，在贪婪加载主要模块后，路由器开始预加载标有 loadChildren 属性的所有剩余模块。
要为预加载重新配置应用程序，可编辑您的 app-routing.module.ts，如下所示。下面的代码导入了预加载模块并调用它们的功能。
清单 5. 原始 app-routing.module.ts 的一节
JavaScript
代码语言：javascript复制import { Routes, RouterModule } from '@angular/router';清单 6. 更新后的 app-routing.module.ts 的一节
代码语言：javascript复制import { Routes, RouterModule, PreloadAllModules } from '@angular/router';清单 7. 原始 app-routing.module.ts 的一节
代码语言：javascript复制imports:[RouterModule.forRoot(appRoutes)],清单 8. 更新后的 app-routing.module.ts 的一节
代码语言：javascript复制imports:[RouterModule.forRoot(appRoutes, {preloadingStrategy:PreloadAllModules})],保存更新后的文件，然后运行该应用程序。在 Chrome 浏览器中重新加载该应用程序，然后转到 Chrome 开发人员工具的 Network 和 Sources 选项卡。x.chunk.js 和 y.chunk.js 文件应紧接着主应用程序后被加载，使辅助模块在用户单击这些菜单之前就已可用。参见 Angular4PreLoadModules.zip 中的示例应用程序，更详细地了解预加载。
自定义预加载：在大型应用程序中，仅预先加载少数惰性加载模块的做法是比较合理的。请参见 Angular 文档的 路由和导航 部分，了解如何自定义预加载配置。
结束语
加载时间是应用程序性能的关键因素，它会影响应用程序的用户体验。本教程介绍了一种混合加载策略，使用贪婪加载、惰性加载和预加载 3 种技术来提高应用程序性能。要实现有效的混合加载策略，可遵循以下经验法则：
- 对基础应用程序功能和主要模块使用贪婪加载。这些是必须在应用程序启动时就能用的资源。
- 对大多数用户将要访问的模块使用预加载，即使它们不是第一个查找的或查找得最频繁的应用程序资源。
- 对需求不太高的模块使用惰性加载。
