如何在不重新加载整个页面的情况下重新加载动态加载的 ES6 模块(使用 import() 作为函数)?

Question

即使服务器上的模块已更改，以下代码将始终记录相同的消息，无论发送的 Cache-Control 标头如何：

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

除非重新加载整个页面。 有没有一种编程方法来破坏动态导入缓存，类似于 NodeJS 中的delete require.cache[...]？

Answer 1

为了避免浏览器缓存，您应该使脚本 url 动态化。 从服务器获取 url 的动态部分(哈希或查询(会有一些开销。 但是你会想要行为，没有页面重新加载和脚本重新获取。

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

但是 webpackHMR不是用于生产用途，仅用于开发目的。