PWA通用页面缓存方法：如何让浏览器将指定路由资源缓存到内存？

不存在可以直接强制浏览器将指定URL资源保存在内存中的HTML meta标签，浏览器的内存缓存是自动调度的，会根据当前内存占用、资源访问频率等因素动态淘汰资源，但可以通过以下方案实现同一会话内资源无需重复加载的需求：

1. 配置HTTP强缓存（最稳妥方案） #

通过配置资源的HTTP响应头，让浏览器直接复用本地缓存的资源，完全跳过网络请求：

• 给所有静态资源（JS、CSS、静态资源等）设置Cache-Control响应头，若仅需要会话内有效可配置为public, max-age=1800（1800秒即30分钟，可按需调整时长）；如果资源更新时会带哈希戳，可直接配置为public, max-age=31536000, immutable获得更长的缓存周期。
• 组件的入口HTML页面不要设置强缓存，可配置Cache-Control: no-cache，保证每次访问都能拿到最新的入口文件，避免资源更新后用户获取不到新版本。

2. 预加载+同域资源复用 #

由于组件和主应用同域名，可以提前预加载资源提升复用率：

• 在主应用页面插入link rel="preload"标签，提前加载组件所需的核心JS资源，示例代码：

  <link rel="preload" href="/your-component/core-bundle.js" as="script">
  

  资源提前加载完成后，用户访问组件页面时浏览器会直接复用已加载的资源，不需要重新发起请求。
• 可以在主应用的全局作用域下将组件的核心JS模块挂载到window对象上，组件页面初始化时优先从全局对象读取已经解析完成的模块，跳过加载、解析流程。

3. 无刷新路由加载（最优体验） #

你可以修改跳转逻辑，避免整页刷新加载组件：

• 采用单页应用的路由方案（History API/Hash路由），在同页面内切换到组件路由，组件资源加载一次后会一直保留在当前页面的内存中，除非用户刷新页面或关闭标签页，完全符合“同一会话内每次导航直接从内存读取”的需求。

精细化缓存可选方案 #

如果需要完全自主控制缓存逻辑，不受浏览器默认缓存策略影响，可以自己实现Service Worker逻辑，将所需资源缓存到Cache Storage中，读取速度接近内存缓存，且可以自定义缓存的留存、淘汰规则。

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