为何未使用的import能修复SPA中DOMContentLoaded不触发问题

核心问题出在ES6模块的异步加载执行特性以及由此导致的代码执行时机偏差：

1. ES6模块的异步本质 #

浏览器加载ES6模块时，默认采用异步模式（等同于给<script>标签加上async属性），模块的执行顺序完全由它们的依赖关系决定，而非HTML中的引入顺序。当script1没有额外import时，script3的执行时机可能晚于DOMContentLoaded事件的触发时间——页面DOM已经解析完成、事件已经触发，script3才刚完成加载执行，自然无法监听到已经发生的事件。

2. 未使用的import为何能"修复"问题 #

添加一个无关的import后，浏览器会先发起对该额外模块的请求（哪怕它没有被实际使用），这个额外的异步请求会延迟script1的执行完成时间，进而间接推迟了整个模块依赖链的执行时机，使得script3的代码刚好在DOMContentLoaded事件触发前完成执行，监听器成功注册。本质上是这个多余的import给模块加载链增加了一个异步等待环节，让script3的执行时机赶在了DOM解析完成之前。

3. 快速验证方法 #

在script3和HTML中添加日志，对比有无额外import时的执行顺序：

// script3.js
console.log('script3 执行');
document.addEventListener('DOMContentLoaded', () => {
  console.log('script3 捕获到DOMContentLoaded');
});

<!-- index.html 中添加同步脚本 -->
<script>
console.log('HTML同步脚本执行');
document.addEventListener('DOMContentLoaded', () => {
  console.log('HTML捕获到DOMContentLoaded');
});
</script>

无额外import时，日志顺序会是：HTML同步脚本执行 → HTML捕获到DOMContentLoaded → script3 执行，直接证明script3执行晚于事件触发。

4. 可行解决方案 #

• 调整执行时机判断：无需依赖事件触发，直接检查DOM状态：

  function init() {
    // 你的业务逻辑
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
  

• 优化模块加载顺序：检查模块依赖链，确保script3不会因依赖缺失或其他模块的异步操作导致执行延迟；或在index.html中优先引入script3模块（注意ES6模块依赖优先，需确保其依赖已正确声明）。

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