Angular外部资源页面加载延迟：缓存后仍存在问题求助

问题描述 #

我有一个Angular组件，从外部API加载文档。首次加载时内容显示有延迟是正常的，但我用shareReplay(1)做了缓存，后续页面访问还是有延迟。一开始在ngOnInit()里加载文档，后来移到构造函数里，延迟问题依旧，不知道怎么消除后续访问的延迟。

组件代码：

@Component({
   selector: "document",
   template: "<div [innerHTML]='body$ | async'></div>"
})
export class DocumentComponent {
   constructor(private readonly documents: DocumentsService) {
      this.body$ = this.documents.get("demo.md");
   }
   public body$!: Observable<string>;
}

服务代码：

// 为简洁起见省略部分代码

public get(document: string): Observable<string> {
   return this.http
      .get(`${url}/api/documents/${document}`, { responseType: "text" })
      .pipe(shareReplay(1));
}

// 为简洁起见省略部分代码

注：尽管请求的是“demo.md”，但响应格式为HTML。

问题根源 #

你当前的shareReplay(1)是绑定在每次调用get()方法返回的新Observable实例上的。也就是说，每次组件创建时调用documents.get("demo.md")，都会生成一个全新的Observable，之前的缓存只对旧实例有效，新实例还是会重新发起请求（或者说无法复用之前的缓存值），导致后续访问依然有延迟。

解决方案 #

方案1：服务层持久化缓存Observable实例

修改DocumentsService，用一个容器存储已请求过的文档Observable，确保多次调用get()时返回同一个缓存的实例：

export class DocumentsService {
  // 用Map存储已缓存的文档Observable，键为文档名称
  private documentCache = new Map<string, Observable<string>>();
  private baseUrl = '你的API基础地址'; // 替换为实际API地址

  constructor(private http: HttpClient) {}

  public get(document: string): Observable<string> {
    // 检查缓存，不存在则创建请求Observable并缓存
    if (!this.documentCache.has(document)) {
      const docObservable$ = this.http
        .get(`${this.baseUrl}/api/documents/${document}`, { responseType: 'text' })
        .pipe(
          shareReplay(1),
          // 可选：处理错误，避免缓存失败的请求
          catchError(error => {
            this.documentCache.delete(document); // 移除错误缓存，允许后续重新请求
            return throwError(() => error);
          })
        );
      this.documentCache.set(document, docObservable$);
    }
    // 返回缓存的Observable
    return this.documentCache.get(document)!;
  }
}

这样无论组件销毁重建多少次，调用get("demo.md")都会返回同一个已被shareReplay缓存的Observable，后续订阅直接获取缓存的响应值，不会有延迟。

方案2：提前预加载文档（可选）

如果希望用户首次访问前就完成缓存，可以在应用初始化阶段提前加载目标文档：

// 定义预加载工厂函数
export function preloadDemoDocument(docService: DocumentsService) {
  return () => docService.get("demo.md").pipe(take(1)).toPromise();
}

// 在AppModule的providers中配置APP_INITIALIZER
@NgModule({
  // ...其他配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: preloadDemoDocument,
      deps: [DocumentsService],
      multi: true
    }
  ]
})
export class AppModule {}

应用启动时会自动加载并缓存文档，后续任何组件访问都能直接拿到缓存内容，彻底消除延迟。

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