Angular CLI的PWA方案能否结合PreloadAllModules与Service Worker缓存模块？

嘿，我来帮你理清这两个Angular PWA相关的问题，都是实际项目里很常用的场景！

1. 懒加载/预加载Angular模块并通过Service Worker缓存结果 #

完全没问题！不管是懒加载还是预加载的Angular模块，Service Worker都能轻松帮你缓存对应的资源。核心思路是通过Angular的ngsw-config.json配置文件指定缓存规则，同时配合路由的加载策略控制模块加载时机，让Service Worker能捕获并缓存这些模块资源：

• 懒加载模块缓存：当用户首次触发懒加载路由（比如点击某个导航链接），浏览器会请求对应的模块chunk文件，此时Service Worker会按照你的配置自动缓存这些chunk，下次用户再访问时直接从缓存读取，不用重新请求。
• 预加载模块缓存：如果用了PreloadAllModules这类预加载策略，Angular会在应用启动后后台悄悄加载所有懒加载模块，这些模块的chunk文件同样会被Service Worker拦截并缓存，提前为用户后续访问做好准备。

2. Angular CLI的PWA方案对预加载/懒加载模块缓存的支持 #

Angular CLI生成的PWA方案完全支持结合路由预加载策略与Service Worker缓存预加载资源，配置起来也很直观：

步骤1：启用PWA和路由预加载 #

首先确保你已经通过ng add @angular/pwa启用了PWA功能，然后在路由模块里配置PreloadAllModules策略：

import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  // 其他懒加载路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules // 开启全模块预加载
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤2：配置Service Worker缓存规则 #

在ngsw-config.json里，默认已经包含了针对懒加载chunk的缓存组，会自动匹配所有预加载/懒加载的模块资源：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    },
    // 这个组会匹配所有懒加载/预加载的chunk文件
    {
      "name": "lazy",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/**/*-chunk*.js"
        ]
      }
    }
  ]
}

这里的"/**/*-chunk*.js"规则会命中所有懒加载生成的chunk（包括预加载的那些）。当PreloadAllModules触发预加载时，这些chunk的请求会被Service Worker捕获，按照installMode: "lazy"的规则缓存（第一次请求后存入缓存），后续访问直接走缓存。

如果想让预加载的模块在Service Worker安装时就提前缓存（不用等第一次请求），可以把installMode改成"prefetch"，但要注意这会增加Service Worker安装时的资源下载量，需要平衡应用启动速度和缓存覆盖率。

验证缓存效果 #

你可以打开浏览器DevTools（Application > Service Workers > Cache Storage）查看缓存的资源，确认预加载的模块chunk是否已经被缓存起来。

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