如何有效清除import()动态导入的JS模块缓存？

动态导入JS模块及缓存清除策略

使用JavaScript的import()函数动态导入模块时，浏览器默认启用缓存机制。这在需要频繁更新模块内容的场景下可能导致问题。本文探讨有效清除import()导入JS模块缓存的方法，并分析常见问题。

核心问题在于如何避免import()动态导入JS脚本时缓存的影响。 一些开发者尝试添加时间戳，但遇到部分报错。

主要解决方法如下：

方法一：利用时间戳强制刷新

这是最直接的方案，通过在模块路径后添加动态变化的时间戳，强制浏览器每次重新加载文件。代码示例：

import(`./mymodule.js?v=${Date.now()}`);

Date.now() 获取当前时间戳，每次导入路径都不同，从而绕过浏览器缓存。 部分开发者反馈此方法报错，这可能是路径构建方式或其他配置差异导致，需根据实际情况排查。

方法二：利用构建工具配置

使用Webpack、Vite等构建工具时，可在配置文件中禁用缓存。例如，Webpack中设置cache: false：

module.exports = {
  // ...
  cache: false,
};

这将阻止Webpack缓存构建输出，每次都重新构建模块。 对于Vite项目，需参考其官方文档，关注依赖预打包的缓存机制并进行相应配置。

两种方法都能有效解决import()缓存问题，选择取决于项目使用的构建工具和开发环境。 需要注意的是，频繁重新加载模块可能影响性能，需根据实际情况权衡。