统一管理MPA中第三方库长期缓存的核心是构建层提取带contenthash的vendor chunk、HTML中统一用绝对路径引用、服务端对/vendor.*.js/css配置Cache-Control: public, max-age=31536000, immutable，同时HTML自身禁用强缓存。
在多页面应用（MPA）中统一管理第三方库的长期缓存，核心是让所有 HTML 页面共享同一份稳定、带哈希的 vendor 资源，并通过 HTTP 缓存头确保浏览器复用。关键不在于每个页面单独处理，而在于构建层与服务层协同控制。
构建时提取并固定 vendor 资源
所有页面共用的第三方库（如 Vue、React、Lodash、Axios）必须从各页面入口中抽离，生成独立且文件名稳定的 chunk：
- 使用 Vite 的
build.rollupOptions.output.manualChunks或 Webpack 的optimization.splitChunks配置，按模块来源或正则匹配提取 vendor - 确保 vendor 文件名包含
contenthash（如vendor.a1b2c3.js），内容不变则哈希不变，文件名也不变 - 避免将业务代码混入 vendor chunk，否则一次业务修改会导致整个 vendor 缓存失效
HTML 中统一引用绝对路径资源
每个页面的 index.html 必须以相同方式加载 vendor 脚本，才能被浏览器识别为同一资源：
- 所有页面 HTML 中引用 vendor 的 script 标签都使用绝对路径，例如：
<script src="/assets/vendor.a1b2c3.js"></script> - 禁止相对路径（
./vendor.js）或无 hash 的路径（/vendor.js），否则浏览器视为不同资源，无法复用缓存 - 建议将公共静态资源统一输出到
dist/assets/目录下，便于 CDN 或 Nginx 统一配置缓存策略
服务端或 CDN 配置强缓存规则
仅靠文件名哈希不够，必须配合响应头才能启用长期缓存：
立即学习“Java免费学习笔记（深入）”；
- 对匹配
/assets/vendor.*\.js和/assets/vendor.*\.css的请求，返回Cache-Control: public, max-age=31536000, immutable -
immutable告诉浏览器：只要 URL 不变，内容绝不会更新，无需发起条件请求（ETag/Last-Modified） - Nginx 示例配置：
location ~ ^/assets/vendor\.[a-f0-9]{8,}\.(js|css)$ { add_header Cache-Control "public, max-age=31536000, immutable"; }
HTML 文件本身禁用强缓存
页面 HTML 是缓存策略的“调度中心”，必须保证用户每次访问都能拿到最新版本：
- HTML 文件应设置短缓存或协商缓存，例如：
Cache-Control: no-cache或max-age=0 - 这样即使 vendor 资源长期缓存，HTML 更新后仍能加载新哈希的 vendor，避免资源错配
- Vite 默认对 HTML 使用
no-cache，Webpack + HtmlWebpackPlugin 也建议显式配置cache: false或设置相应 header
