React结合ServiceWorker实现代码分割及分路由资源按需加载问题咨询

• 优先选择单应用架构下的配置调整方案，无需拆分应用：
  你目前的问题本质是ServiceWorker默认的预缓存策略将全量构建产物都加入了预缓存列表，只需要调整SW的配置规则即可：
  如果你使用Workbox（大部分React应用的SW工具，包括CRA内置的SW也是基于Workbox），修改预资源匹配规则：
  1. 配置globPatterns仅匹配/web模块对应的chunks、静态资源、HTML入口，将/app模块对应的所有chunks从预缓存清单中排除
  2. 对/app模块的资源改用运行时缓存策略，仅在用户首次访问/app路由触发懒加载时，才会下载对应的资源并缓存到本地，不会在用户首次访问站点时预下载
• 子域名部署方案的可行性：
  单React应用架构下子域名部署无法解决全量预缓存的问题，因为单应用的构建产物是全量打包的，SW的预缓存逻辑会扫描所有构建产物，和域名无关。只有你将应用拆分为两个独立应用，分别部署在不同子域名，且每个应用配置独立的ServiceWorker时，子域名方案才生效，每个SW只会预缓存当前应用的资源。

• 同源部署场景（两个应用都部署在example.com下，仅路由路径不同，分别对应/web和/app）：
  直接使用localStorage或者同域Cookie共享状态：
  1. 登录成功后将认证token、用户状态写入localStorage，/app应用加载时直接读取localStorage中的认证信息即可，同域名下不同路径的应用共享同一份localStorage
  2. 更安全的方式是使用HttpOnlyCookie，登录成功后端返回Cookie时设置Path=/，两个应用的请求都会自动携带该Cookie，后端直接校验即可，前端无需手动处理状态传递
• 跨子域名部署场景（web.example.com和app.example.com）：
  1. Cookie共享：设置Cookie的Domain=.example.com，Path=/，两个子域名下的应用都可以读取/携带该Cookie
  2. 授权码跳转传递：登录成功后后端生成一次性有效授权码，跳转时拼在/app的跳转地址后，比如https://app.example.com?auth_code=xxx，/app应用拿到授权码后请求后端兑换正式的认证token，避免状态存储泄露风险
  3. iframe桥接：在app.example.com下嵌入隐藏的web.example.com的iframe，通过postMessage协议实现跨子域名的localStorage数据互通

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