如何清除 JavaScript import() 导入的脚本缓存？
2023-03-01 09:07:54
清除 JavaScript import() 导入脚本缓存的核心方法是通过修改资源标识或禁用构建工具缓存，具体包括时间戳法、构建工具配置调整两种主要方式。以下是详细说明：
一、时间戳法（通用方案）通过在动态导入的 URL 后附加时间戳参数，使每次请求的地址唯一化，从而绕过浏览器缓存机制。
- 实现方式：const date = new Date();import(`./mymodule.js?v=${date.getTime()}`);
原理：浏览器将 mymodule.js?v=123456789 视为全新资源，强制重新下载。
适用场景：所有支持动态导入的浏览器环境，无需依赖构建工具。
注意事项：
时间戳需动态生成（如使用 Date.now()），固定值无效。
部分 CDN 或服务器可能忽略查询参数缓存，需测试验证。
若项目使用 Webpack 或 Vite 等工具，可通过关闭缓存功能强制重新加载脚本。
1. Webpack 配置在 webpack.config.js 中设置 cache: false，禁用构建缓存：
module.exports = { // ...其他配置 cache: false, // 禁用Webpack缓存};- 原理：Webpack 默认会缓存构建结果，关闭后每次构建均重新生成文件。
- 适用场景：开发环境或需要完全避免缓存的场景。
- 注意事项：
生产环境禁用缓存可能影响构建性能，建议仅在调试时使用。
需配合其他缓存控制策略（如 HTTP 头）管理生产环境缓存。
在 vite.config.js 中设置 build.cache: false，禁用构建缓存：
export default { // ...其他配置 build: { cache: false, // 禁用Vite构建缓存 },};- 原理：Vite 默认启用构建缓存以加速开发，关闭后每次启动均重新处理文件。
- 适用场景：开发环境或需要实时更新动态导入模块的场景。
- 注意事项：
生产环境建议保留缓存以提升构建速度。
开发服务器（devServer）的缓存需单独配置（如通过 server.hmr 控制热更新）。
HTTP 缓存头控制
服务器返回 Cache-Control: no-store 或 Cache-Control: max-age=0，强制浏览器不缓存资源。
需后端配合配置，适用于所有资源类型（包括动态导入脚本）。
版本号法
类似时间戳法，但使用固定版本号（如 mymodule.js?v=1.0.1），在版本更新时手动修改参数。
优点：可精确控制缓存失效时机。
缺点：需手动维护版本号，自动化程度较低。
Service Worker 缓存管理
若项目使用 Service Worker，需在 sw.js 中监听 fetch 事件，动态返回最新资源或忽略缓存。
示例代码：self.addEventListener('fetch', (event) => { if (event.request.url.includes('mymodule.js')) { event.respondWith(fetch(event.request.url + '?v=' + Date.now())); }});
- 开发环境：优先使用时间戳法或构建工具缓存禁用（如 Webpack/Vite 的 cache: false），快速验证代码更新。
- 生产环境：
若脚本频繁更新，采用时间戳法或版本号法，结合 HTTP 头控制缓存。
若脚本稳定，保留缓存以提升性能，通过版本迭代更新资源。
- 复杂场景：结合 Service Worker 或 CDN 缓存策略，实现精细化缓存管理。
通过上述方法，可有效解决 import() 动态导入脚本的缓存问题，确保代码更新及时生效。
热门标签
