iOS Safari加载过时JavaScript问题求助：缓存未引用旧JS致崩溃

问题描述 #

iOS端Safari会尝试加载内存缓存中未被HTML引用的JavaScript文件。首次运行一切正常，但发布更新后，Safari在加载所有新文件的同时，还会加载未被任何地方引用的旧缓存文件，导致应用因与vendor包不同步而崩溃。

背景 #

基于React开发的应用，使用Vite作为打包工具。未开启分块（chunking）时无异常，开启分块后，仅iOS Safari出现该问题，其他环境均正常。

复现步骤 #

1. 配置简单分块规则：
   • 将node_modules内容打包至vendor
   • 其余内容打包至index
     配置代码如下：

   rollupOptions: {
       output: {
           entryFileNames: 'assets/[name].[hash].js',
           manualChunks: (id: string) => {
               if (id.includes('node_modules')) {
                   return 'vendor';
               } else {
                   return 'bundle';
               }
           },
           chunkFileNames: (chunkInfo) => {
               const hash = createHash('md5')
                   .update(Object.values(chunkInfo.moduleIds).join())
                   .digest('hex')
                   .substr(0, 6);
               return 'assets/[name].' + hash + '.js';
           },
       },
   },
   

2. 生成初始构建版本（build V1）：
   • dist/assets/index.SBYBNO79.js
   • dist/assets/vendor.b1e99d.js
     （初始构建的资源列表截图）
     在iOS端打开应用，运行正常。
3. 进行任意更新后重新构建（build V2）：
   • dist/assets/index.-9z7R_h8.js（已更新）
   • dist/assets/vendor.b1e99d.js（未变更）
     （更新后的资源列表截图）
4. iOS Safari加载应用时，会从新HTML获取所有新资源，但同时会加载旧文件index.SBYBNO79.js，而该文件并未在HTML中被引用。
   （Safari加载额外旧文件的请求截图）
   （请求详情截图）

思考 #

• 完全禁用缓存可解决问题，但需求是让HTML中引用的JavaScript能够被缓存。
• 该问题仅出现在iOS端Safari（手机）。
• 已调试两周，最终定位到这个“额外”的JavaScript请求，寻求解决提示或方向。

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