【SNF-A】Angular 增加 Hammer.js 的 Lazy Loading 支持

來自專欄 Angular News

類別

新增功能／Splendid New Feature

置信度

Announcement

起始時間

2018-06-06

內容

Angular 的 BrowserModule 模塊中提供了 EVENT_MANAGER_PLUGINS 機制用於模版中的事件綁定擴展，並自帶了對 Hammer.js 的 Plugin 支持。

作為官方推薦的事件擴展庫，Angular Material 中也有部分組件將 Hammer.js 作為依賴。

之前的版本中，Hammer.js 必須要在組件視圖初始化之前載入，否則無法使用 Hammer.js 提供的事件。

自 6.1.0-beta.0 版本開始，可以通過主動實現 HAMMER_LOADER 來定義 Hammer.js 的載入方式，會在首次用到 Hammer.js 事件的時候執行，從而在需要使用 Hammer.js 的情況下才會引入 Hammer.js 的運行時（不過 7KB 本身並不算太大）。

使用方式類似於：

import { HAMMER_LOADER } from @angular/platform-browserexport function DynamicImportHammerLoader() { return import(hammerjs)}someConfig({ providers: [ { provide: HAMMER_LOADER, useValue: DynamicImportHammerLoader } ]})

需要注意的是，在使用 Lazy Loading 的方式下，視圖初始化完成到 Hammer.js 載入完成這段時間內將無法響應事件。

如果確定在主要頁面內容中用到了 Hammer.js，建議仍然在 Eager Bundle 中載入。

相關鏈接

• 引入 Hammer.js Lazy Loading 支持的 Commit：feat(platform-browser): allow lazy-loading HammerJS (#23906) · angular/angular@313bdce
• Hammer.js 的 GitHub Repo：https://github.com/hammerjs/hammer.js

推薦閱讀：