专栏首页京程一灯教程|在 Angular 4 中加载功能模块(下)

教程|在 Angular 4 中加载功能模块(下)

练习 2:惰性加载

假设多个团队正在为此应用程序开发模块。您的离岸团队刚交付了 Weather 和 Currency 模块。您的任务是将新模块合并到主应用程序中。

从应用程序源代码中解压 Angular4LazyLoadModules 文件(位于 Angular4TutorialSrc.zip 中)。将 weather 和 currency 文件夹复制到您的主应用程序目录中,如下所示。

图 8. 将辅助模块添加到主应用程序目录

您的下一个任务是告诉 Angular 为 Weather 和 Currency 模块实现惰性加载。要将新模块添加到基础应用程序中,可以编辑 app-routing.module.ts,如下所示:

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

const appRoutes: Routes = [ 
  { path: '', redirectTo: '/markets', pathMatch: 'full' },
  { path: 'markets', component: MarketsComponent },
  { path: 'sports', component: SportsComponent }
];

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

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 的一节

<li routerLinkActive="active">
 <a routerLink="/sports">Sports</a>
</li>

在该语句下插入以下代码:

清单 4. 更新后的 app.component.html 的一节

<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

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, {preloadingStrategy:PreloadAllModules})],

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

自定义预加载:在大型应用程序中,仅预先加载少数惰性加载模块的做法是比较合理的。请参见 Angular 文档的 路由和导航 部分,了解如何自定义预加载配置。

结束语

加载时间是应用程序性能的关键因素,它会影响应用程序的用户体验。本教程介绍了一种混合加载策略,使用贪婪加载、惰性加载和预加载 3 种技术来提高应用程序性能。要实现有效的混合加载策略,可遵循以下经验法则:

  • 对基础应用程序功能和主要模块使用贪婪加载。这些是必须在应用程序启动时就能用的资源。
  • 对大多数用户将要访问的模块使用预加载,即使它们不是第一个查找的或查找得最频繁的应用程序资源。
  • 对需求不太高的模块使用惰性加载。

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:Babu Suresh

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-07-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 教程|在 Angular 4 中加载功能模块(上)

    过去几年来,Angular 作为单页 Web 应用程序的开发框架变得越来越流行。尽管 Angular 4 最初是为 JavaScript 而设计的,但它在 An...

    疯狂的技术宅
  • Chrome将内置原生的懒加载功能

    未来Google Chrome的某个版本将支持懒加载,这是一种延迟加载图像和iframe的机制,如果它们加载时在用户的屏幕上不可见的话。

    疯狂的技术宅
  • 提高页面的加载速度的几个小技巧[每日前端夜话0x3F]

    为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放...

    疯狂的技术宅
  • 读《深入理解Java虚拟机》解决实际问题及总结JDK和JVM整体架构

    以前看别人博客说看完《深入理解Java虚拟机》这本书并没有让自己的编程水平提高多少,不过却大大提高了自己的装逼水平。其实,我倒不这么认为,至少在我看完一遍这本书...

    Java小朔哥
  • Xposed加载JNI库

    用户1907613
  • 日志那点事儿——slf4j源码剖析

    前言: 说到日志,大多人都没空去研究,顶多知道用logger.info或者warn打打消息。那么commons-logging,slf4j,logback...

    用户1154259
  • 微信小游戏-妖娆向日葵

    微信小游戏-妖娆向日葵,随着音乐节奏,点击左右按钮控制场景中人物形象播放速度,操作反应越快燃烧的卡路里越多、人物形象播放速度越快。

    程序源代码
  • JS图片预加载插件

          在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验。  1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟...

    用户1055830
  • 小程序view中的节点数最多是多大?

    前言:做前端开发的同学,都遇到过页面节点过多,从而导致页面加载很慢,或者浏览器直接崩溃~ ? 在小程序开发中,下拉刷新数据的用法应该比较多,那么小程序页面节点最...

    连胜
  • Macro-Output Query(Edit Check Macro)

    愉快的周末又要结束了,繁忙的周一也即将开始!小编今天给大家Share的一个Macro是关于临床数据清理中的一个实用性的Macro,SAS Edit Check ...

    Setup

扫码关注云+社区

领取腾讯云代金券