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

Question

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

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

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

Answer 1

为了避免浏览器缓存，您应该使脚本 url 动态化。从服务器获取 url 的动态部分（哈希或查询）会产生一些开销。但您将获得想要的行为，无需重新加载页面和重新获取脚本。

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

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