Spartacus中如何手动预取懒加载功能模块？

ngx-quicklink可自动预取页面可见链接对应的Angular路由懒加载模块，但Spartacus的功能懒加载基于CMS组件，无法直接复用该逻辑，以下是手动预取懒加载模块的具体实现方案：

核心实现方式 #

Spartacus的CMS组件懒加载依赖Angular的动态模块加载能力，我们可以通过import()语法手动触发模块预取，结合场景时机执行即可。

1. 直接调用动态加载语法预取 #

Angular支持通过import()动态加载懒加载模块，调用该方法后浏览器会自动发起模块资源的预取请求：

// 预取目标模块，无需额外处理加载后的逻辑，仅触发预取即可
import('@spartacus/checkout');

2. 结合Spartacus事件触发预取 #

利用Spartacus提供的业务事件，在用户完成特定操作后触发预取，比如加入购物车成功后预取结账模块：

import { Component, OnInit } from '@angular/core';
import { CartService } from '@spartacus/core';

@Component({
  selector: 'app-add-to-cart-popup',
  templateUrl: './add-to-cart-popup.component.html'
})
export class AddToCartPopupComponent implements OnInit {
  constructor(private cartService: CartService) {}

  ngOnInit(): void {
    // 监听加入购物车成功事件，触发结账模块预取
    this.cartService.getAddEntrySuccessEvent().subscribe(() => {
      import('@spartacus/checkout');
    });
  }
}

3. 基于页面生命周期预取 #

在页面组件的初始化钩子中预取高频访问的模块，比如首页加载时预取商品和购物车模块：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html'
})
export class HomePageComponent implements OnInit {
  ngOnInit(): void {
    // 预取商品模块
    import('@spartacus/product');
    // 预取购物车模块
    import('@spartacus/cart');
  }
}

典型预取场景 #

• 加入购物车弹窗中预取结账模块
• 首页预取商品模块（和/或购物车模块）
• 商品详情页（PDP）预取购物车模块
• 商品列表页（PLP）预取商品模块（和/或购物车模块）

注意事项 #

• 避免过度预取：一次性预取大量模块会占用过多带宽，影响当前页面加载性能，需按需选择。
• 优先预取高优先级模块：针对用户即将触发的操作对应的模块优先预取，提升后续操作的响应速度。
• 确保Angular版本兼容性：动态import()语法需Angular 8及以上版本支持。

内容的提问来源于stack exchange，提问作者Krzysztof Platis