如何重新加载使用import()函数动态加载的ES6模块而不重新加载整个页面？

Question

以下代码将始终记录相同的消息，即使服务器上的模块发生了更改，而Cache-Control标题无论发送什么内容：

import('http://example.com/script.mjs').then(m => console.log(m.default))

除非整个页面被重新加载，否则无法清除动态导入缓存。 是否有一种编程方式可以破坏动态导入缓存，类似于NodeJS中的delete require.cache[...]？

- Dmitry

---

你只调用一次 import 吗？通常当模块更新时，你应该再次执行 import('http://example.com/script.mjs')。 - Anton Tuyakhov

除非整个页面被刷新，否则再次调用不会重新加载模块。在devtools中尝试一下。通常这是有意义的，因为模块可能具有全局单例，您的其余代码可能依赖于它：与Node的require相同的行为。但是在Node中，如果需要，可以手动破坏它。 - Dmitry

模块会被 URL 缓存，我不认为目前有一种无效缓存的方法。在动态加载脚本时，加上随机查询字符串是否可行？ - loganfsmyth

这确实是我迄今为止找到的唯一解决方案，但它也会阻止服务器在脚本实际上未更改时发送304。 - Dmitry

Answer 1

为了避免浏览器缓存，您应该使脚本 URL 动态化。 从服务器获取 URL 的动态部分（哈希或查询）会有一些额外开销。 但是这样可以实现所需的行为，无需重新加载页面和脚本。

高级方法是热模块替换 (HMR)，例如在 webpack 中 https://webpack.js.org/concepts/hot-module-replacement/。

但是 webpack HMR 不用于生产，仅用于开发目的。

- Eugene Mihaylin