大文件缓存失效后反复回源的典型表现是用户首次访问正常，刷新或二次打开时仍完整下载，network面板显示200 ok而非304 not modified，主因是缺失last-modified/etag或缓存头冲突（如no-cache与max-age并存），需确保etag基于内容哈希且服务端正确响应if-none-match。
大文件缓存失效后反复回源的典型表现
用户首次访问正常，但刷新或二次打开时仍触发完整下载，Network 面板显示 200 OK 而非 304 Not Modified，说明浏览器没走缓存校验逻辑。常见于未设置 Last-Modified 或 ETag，或服务端返回了不一致的缓存头（比如 Cache-Control: no-cache 与 max-age=31536000 并存）。
解决思路不是单纯拉长 max-age，而是确保「缓存存在性」和「有效性验证」两个环节都可靠：
- 静态资源必须带稳定、可比对的
ETag（推荐基于文件内容哈希生成，而非 inode 或修改时间） - 服务端需正确响应
If-None-Match请求头，返回304且不带响应体 - 避免在构建流程中动态插入时间戳类字段到 HTML 中，否则会导致 HTML 缓存失效，连带其引用的 JS/CSS URL 也被视为新资源
预加载 + 缓存协同的实操边界
preload 不是缓存替代品，它只影响资源获取时机，不改变缓存策略。对大文件（如 >2MB 的 WebAssembly 模块或高清地图数据），盲目加 <link rel="preload" href="data.wasm"> 可能挤占首屏关键资源带宽，反而拖慢渲染。
更合理的做法是分层控制：
- 对「必须立即执行」的大资源（如核心渲染逻辑），用
preload+as="script"或as="fetch"，并确保该 URL 已配置强缓存（Cache-Control: public, immutable, max-age=31536000） - 对「按需加载」的大资源（如离线地图瓦片、动画素材包），改用
prefetch，让浏览器在空闲时加载，且该链接本身也应带长期缓存头 - 禁用
preload的crossorigin属性除非必要——跨域预加载会触发 CORS 预检，增加延迟，且若服务端未配Access-Control-Allow-Origin，直接失败
本地文件系统缓存的绕过风险（wkhtmltopdf / Electron 场景）
在 wkhtmltopdf 或 Electron 等基于 WebKit/Chromium 的离线环境里，大资源（如本地 CSS、字体、SVG）常因安全策略被拦截，报错类似 Not allowed to load local resource。这不是缓存问题，而是加载权限问题。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
关键修复点不在 HTTP 头，而在启动参数与路径写法：
- 必须启用
--enable-local-file-access，且该参数要放在命令行最前（部分版本位置敏感） - HTML 中引用本地资源时，路径必须为相对路径或
file://绝对路径，禁止用../跨出当前目录树（wkhtmltopdf默认禁止） - 缓存目录需显式指定：
--cache-dir ./cache，否则引擎可能每次重建临时缓存，导致大文件重复解码
Immutable 缓存头对大文件的实际价值
Cache-Control: immutable 告诉浏览器“这个资源永远不会变”，从而跳过后续的条件请求（即不发 If-Modified-Since 或 If-None-Match）。它对带哈希指纹的大文件（如 main.a1b2c3d4.js）真正有效；但对无哈希的 vendor.js 加这个头，反而会让更新无法生效。
使用前提很具体：
- 资源 URL 必须包含唯一内容标识（如内容哈希、版本号、时间戳）
- 构建工具（Vite/Webpack）需开启
assetPrefix或publicPath保证所有引用路径一致 - CDN 或反向代理（如 Nginx）不能覆盖或删掉原始
Cache-Control头
漏掉任意一点，immutable 就会变成缓存陷阱——用户永远拿不到新版本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
