Parcel.js动态导入模块时HMR热更新失效问题咨询

结论 #

这不属于Parcel 2.0 HMR的预期行为，本质是动态导入场景下缺少手动的HMR更新处理逻辑导致的表现异常。

原因说明 #

• 同步import场景下，Parcel的HMR机制会自动替换更新后的模块，并且重新执行模块的顶层代码，你写的init()调用属于入口文件的顶层逻辑，更新后会自动重新执行，因此改动可以直接生效。
• 动态import()场景下，Parcel依然会检测到faqs.js的改动并推送HMR更新到浏览器，但是你的动态导入逻辑只在页面首次加载时执行了一次Faqs.init()，HMR触发后没有主动重新加载更新后的模块、执行新的初始化逻辑，因此页面上还是旧的代码逻辑，需要手动刷新才能生效。

修复方案 #

在入口文件中补充动态导入对应的HMR接受逻辑即可，示例代码如下：

// 原动态导入逻辑
import('./components/faqs/faqs.js').then(function(Faqs){
  Faqs.init()  
})

// 新增HMR处理逻辑
if (module.hot) {
  module.hot.accept('./components/faqs/faqs.js', async () => {
    // 可选：先清理旧Faqs实例的绑定事件、生成的DOM等，避免内存泄漏或重复渲染
    const updatedFaqs = await import('./components/faqs/faqs.js')
    updatedFaqs.init()
  })
}

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