Chrome忽略Cache-Control no-store指令？本地ES6模块缓存求助

针对你遇到的Chrome不遵守no-store缓存头、缓存戳无法递归传递到导入模块的问题，这里提供几个无需webpack的轻量解决办法：

1. 强化缓存禁止响应头 #

Chrome对部分缓存指令的处理可能存在优先级问题，给响应头补充更全面的禁止缓存参数，覆盖新旧标准：

function setHeaders(res, path) {
    // 组合多种缓存禁止指令
    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
    // 兼容HTTP 1.0
    res.setHeader('Pragma', 'no-cache');
    // 设置过期时间为过去
    res.setHeader('Expires', '0');
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', '*');
}

2. 服务器端自动给所有模块添加缓存戳 #

通过Express中间件拦截JS文件请求，自动修改文件内的import语句，给所有相对路径的模块添加动态缓存戳（比如当前时间戳），确保递归导入的模块也能绕过缓存：

const express = require("express");
const serveStatic = require("serve-static");
const morgan = require("morgan");
const fs = require('fs');
const path = require('path');

function setHeaders(res, path) {
    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
    res.setHeader('Pragma', 'no-cache');
    res.setHeader('Expires', '0');
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', '*');
}

const app = express();
app.use(morgan('combined'));

// 添加处理JS文件的中间件，动态修改import语句
app.use((req, res, next) => {
    if (req.path.endsWith('.js')) {
        const filePath = path.join(__dirname, req.path);
        fs.readFile(filePath, 'utf8', (err, data) => {
            if (err) return next(err);
            // 替换所有相对路径的import，添加缓存戳
            const cacheBust = Date.now();
            const modifiedData = data.replace(
                /import\s+.*from\s+['"](\.\/.*?)['"]/g,
                `$&?cb=${cacheBust}`
            );
            res.setHeader('Content-Type', 'application/javascript');
            res.send(modifiedData);
        });
    } else {
        next();
    }
});

app.use(serveStatic('./', { setHeaders }));

app.listen(12345);

注意：这个方案仅在开发环境使用，生产环境要移除，避免影响性能。

3. 在应用内添加主动清空缓存的逻辑 #

在你的Web应用的刷新按钮逻辑中，主动调用浏览器缓存API清空相关缓存，再重新加载脚本：

// 刷新脚本的按钮点击事件处理
async function reloadScript() {
    // 清空所有缓存（开发环境下无影响）
    const cacheKeys = await caches.keys();
    await Promise.all(cacheKeys.map(key => caches.delete(key)));
    
    // 移除旧的脚本标签
    const oldScript = document.querySelector('script[type="module"][src*="your-local-server"]');
    if (oldScript) oldScript.remove();
    
    // 创建新的脚本标签，添加缓存戳
    const newScript = document.createElement('script');
    newScript.type = 'module';
    newScript.src = `http://path.to.my.pc:12345/script.js?cb=${Date.now()}`;
    document.body.appendChild(newScript);
}

这个方案能强制浏览器丢弃之前的模块缓存，确保加载最新代码。

4. 使用Chrome的"Force Reload"快捷键 #

在打开DevTools的状态下，使用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，这个操作会绕过所有缓存，重新加载所有资源，包括ES模块。

内容的提问来源于stack exchange，提问作者FreeMemory