Firefox下网站加载不完全：ES6模块缓存相关问题排查

问题概述 #

• 生产环境下，Firefox引入ES6模块后偶发卡在"read"状态，表现不稳定：有时读取站点内部资源，有时读取Bootstrap等外部URL
• 问题与缓存强相关：资源从服务器全新获取时，网站总能完整加载；从缓存读取时，页面可完成解析，但部分JavaScript运行时会挂起
• 仅生产环境出现，开发环境无法复现，排查难度大

环境细节 #

• 采用独立模块引入方式，共11个JS模块：

<script type="module" src="/scripts/myfile.js"></script>

• 模块为标准ES6结构，示例代码：

import api from "/scripts/api.js";

function myFunction() {
}

window.myFunction = myFunction;

• 未使用Webpack、Parcel等打包工具，无统一入口文件（如index.js/app.js）
• 包含部分Web组件，此前长期使用未出现异常

已尝试无效方案 #

• 参考过相关社区解决方案，未解决问题
• 移除未运行的脚本排查，无改善
• 仅当脚本内嵌到HTML的<script>标签时，问题不会出现

可行排查与解决方向 #

1. 规避模块缓存问题 #

给所有ES6模块的URL添加版本号或内容哈希，强制浏览器获取最新资源，避免缓存旧模块引发的加载异常：

<script type="module" src="/scripts/myfile.js?v=20240520"></script>

生产环境发布时，可通过构建脚本自动更新版本号/哈希值。

2. 优化模块加载策略 #

多个独立<script type="module">默认并行加载，可能存在隐式依赖冲突。尝试：

• 将关联度高的模块合并为少数入口文件，减少独立模块数量
• 确保模块间的import依赖关系清晰，避免隐式的全局依赖冲突

3. 调整服务器缓存头配置 #

检查服务器对JS模块资源的缓存头设置，避免不合理的缓存策略：

• 建议设置Cache-Control: no-cache, must-revalidate，让浏览器每次加载时验证资源有效性
• 避免过长的max-age配置，防止旧模块长期驻留缓存

4. Firefox专属调试与兼容 #

• 升级Firefox至最新稳定版，排查是否为浏览器已知的ES6模块缓存bug
• 在Firefox中开启about:config的devtools.debugger.force-local选项，尝试在生产环境进行调试，捕获挂起时的调用栈信息

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