使用ES模块时DOMContentLoaded被触发两次的排查求助

关于控制台中"manage"与"manage.js"的差异 #

Chrome控制台里的这两个来源标识，本质是模块被加载了两次，且加载方式不同：

• "manage.js"是你通过页面里的<script src="js/manage.js" type="module"></script>直接加载的文件实例。
• "manage"则是通过裸名模块引用触发的加载——比如项目里其他模块使用了import './manage'（不带.js后缀），浏览器或开发服务器在解析时会自动补全后缀找到manage.js，但控制台会以引用时的裸名"manage"来标识这个模块实例。

这直接说明你的manage.js模块被初始化了两次，所以两个实例里的DOMContentLoaded监听器各自触发了一次，导致init被调用两次。

排查方向 #

• 搜索所有import语句：全局查找项目里的import代码，确认是否存在import 'manage'、import './manage'这类不带.js后缀的引用。ES模块在浏览器环境下要求使用完整文件后缀，但部分开发工具或本地服务器会允许裸名引用，容易导致重复加载。
• 检查HTML中的script标签：查看页面源码，确认是否重复添加了引入manage.js的script标签，或者是否有框架/模板渲染时重复输出了该标签。
• 查看Network面板：打开Chrome开发者工具的Network标签，筛选JS文件，查看manage.js的请求记录。通过「Initiator」列可以直接看到两次请求的发起者，定位是哪个文件或操作触发了重复加载。
• 排查循环引用问题：检查manage.js是否和其他模块存在循环引用（比如A模块import manage.js，manage.js又import A模块），极端情况下循环引用可能导致模块被重复实例化。
• 临时移除once选项验证：虽然你添加了{once: true}，但这个选项只能保证当前模块实例里的监听器只执行一次。如果模块被加载两次，两个实例的监听器都会触发。移除once后如果控制台打印四次日志（两次DOMContentLoaded，两次init），就坐实了模块重复加载的问题。

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