javascript - js import() 如何清除缓存？

Question

js import() 如何清除缓存？我有个需求需要动态导入一些js脚本，使用import()导入默认会有缓存，会有很大影响，如何才能实现每次导入的时候清除缓存？

加时间戳的方式其实我刚开始也试了，但使用的第一种方式，这种就会报错，但是我改成方式二，就可以，真奇怪，没有大佬能解释一下这个原因？使用的是vite

Answer 1

一种方法是像AI回答一样的加一个时间戳，让浏览器每次都重新加载js文件

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

如果你用的是webpack构建，可以这样设置:

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

来自:https://webpack.docschina.org/configuration/cache/
使用vite:

来自:https://cn.vitejs.dev/guide/dep-pre-bundling.html#caching

Answer 2

在JavaScript中，import()函数用于动态导入模块，而浏览器通常会对这些模块进行缓存以提高性能。然而，浏览器并没有提供直接清除这些缓存的API。

如果你需要每次导入时都避免使用缓存，你可能需要采取一些策略来绕过这个问题。一种可能的方法是使用唯一的URL参数来强制浏览器重新加载模块。这可以通过在导入的URL后面添加查询参数（例如时间戳）来实现。每次导入时，改变这个查询参数的值，就可以避免浏览器使用缓存。

例如：

let timestamp = new Date().getTime();import(`./module.js?${timestamp}`).then((module) => {  // 使用模块});

每次调用import()时，timestamp都会改变，因此URL也会改变，从而避免使用缓存。

请注意，这种方法可能会导致性能下降，因为浏览器每次都需要重新下载模块。因此，只有在确实需要避免使用缓存的情况下才应使用此方法。

另外，如果你正在使用像Webpack这样的模块打包工具，你可能需要查看其文档以了解如何清除或绕过缓存。不同的工具可能有不同的策略和方法来处理缓存问题。