如何懒加载 Scripts 与 Styles

你不必在模块或组件/指令级别提供 LazyLoadService,因为它已经在根中中提供了. 你可以在组件,指令或服务中注入并使用它.

你可以使用 LazyLoadService 的 load 方法在DOM中的所需位置创建 <script> 或 <link> 元素并强制浏览器下载目标资源.

load 方法的第一个参数需要一个 LoadingStrategy. 如果传递 ScriptLoadingStrategy 实例,LazyLoadService 将使用给定的 src 创建一个 <script> 元素并放置在指定的DOM位置.

import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
@Component({
  template: `
    <some-component *ngIf="libraryLoaded$ | async"></some-component>
  `
})
class DemoComponent {
  libraryLoaded$ = this.lazyLoad.load(
    LOADING_STRATEGY.AppendAnonymousScriptToHead('/assets/some-library.js'),
  constructor(private lazyLoadService: LazyLoadService) {}
}

load 方法返回一个 observable,你可以在组件中或通过订阅它. 在上面的示例中仅当脚本成功加载或之前已经加载脚本时, NgIf 指令才会呈现 <some-component>.

如果传递给 load 方法第一个参数为 StyleLoadingStrategy 实例,LazyLoadService 将使用给定的 href 创建一个 <link> 元素并放置在指定的DOM位置.

load 方法返回一个 observable,你可以在组件中或通过 AsyncPipe 订阅它. 在上面的示例中仅当样式成功加载或之前已经加载样式时, NgIf 指令才会呈现 <some-component>.

请参阅LoadingStrategy查看所有可用的加载策略以及如何构建自己的加载策略.

你有很大的自由度来定义延迟加载的工作方式. 示例:

const domStrategy = DOM_STRATEGY.PrependToHead();
const crossOriginStrategy = CROSS_ORIGIN_STRATEGY.Anonymous(
  'sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh',
);
const loadingStrategy = new StyleLoadingStrategy(
  'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css',
  domStrategy,
  crossOriginStrategy,
);
this.lazyLoad.load(loadingStrategy, 1, 2000);

一个常见的用例是在使用功能之前加载多个脚本/样式:

RxJS forkJoin 并行加载所有脚本和样式,并仅在加载所有脚本和样式时才放行. 因此放置 <some-component> 时,所有必需的依赖项都可用的.

另一个常见的用例是按顺序加载依赖脚本:

import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
import { concat } from 'rxjs';
  template: `
    <some-component *ngIf="scriptsLoaded$ | async"></some-component>
  `
})
class DemoComponent {
  scriptsLoaded$ = concat(
    this.lazyLoad.load(
      LOADING_STRATEGY.PrependAnonymousScriptToHead('/assets/library.js'),
    ),
    this.lazyLoad.load(
      LOADING_STRATEGY.AppendAnonymousScriptToHead('/assets/script-that-requires-library.js'),
    ),
  );
  constructor(private lazyLoadService: LazyLoadService) {}
}

在此示例中,第二个文件需要预先加载第一个文件, RxJS concat 函数将允许你以给定的顺序一个接一个地加载所有脚本,并且仅在加载所有脚本时放行.

load(strategy: LoadingStrategy, retryTimes?: number, retryDelay?: number): Observable<Event>

strategy 是主要参数,上面已经介绍过.
retryTimes 定义加载失败前再次尝试多少次(默认值:2).

懒加载Scripts与Styles

如何懒加载 Scripts 与 Styles