核心是通过资源归属划分、加载时机控制及构建部署协同实现高效缓存。public 目录资源不编译、固定路径；assets 资源由 Webpack 管理，支持哈希、压缩与类型检查；组件与库按需加载并外链 CDN；JS/CSS 启用 contenthash 长期缓存，HTML 协商缓存，图片分层处理；CDN 按域名与响应头精细化配置缓存策略。
核心在于分清资源归属、控制加载时机、利用构建与部署能力。不靠堆插件，而靠路径设计、引用方式和缓存逻辑的协同。
明确 public 与 assets 的分工
public 目录下的文件不参与 Webpack 编译，直接复制到 dist 根目录，适合：
- 需要固定 URL 路径的资源（如 favicon.ico、robots.txt、第三方统计脚本）
- 不想被哈希重命名的图片或字体（例如某些 CMS 后台要求的 logo.png）
- 需在 index.html 中通过 /xxx.png 直接引用的静态资源
src/assets 下的资源由 Webpack 管理，支持：
- 自动哈希命名（如 logo.a1b2c3.png），天然解决缓存更新问题
- 按需处理（SVG 转 React 组件、图片压缩、CSS 中自动转 base64）
- 类型检查（TypeScript 项目中可声明 .png 模块类型）
按需加载组件与第三方库
避免全量引入 UI 库或大型依赖：
立即学习“前端免费学习笔记（深入）”；
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 使用 vux-loader 或 unplugin-vue-components（Vite）实现 VUX/Element Plus 组件自动按需导入
- 将 Vue、Vue Router、Axios 等基础依赖通过 CDN 外链引入，从 vendor chunk 中剥离
- 在 vue.config.js 或 vite.config.ts 中配置 externals，配合 HTML 模板注入 script 标签
示例（vue.config.js）：
config.configureWebpack = { externals: { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios' } }构建阶段做资源分层与命名控制
让不同生命周期的资源拥有匹配的缓存策略：
- JS/CSS 文件启用 contenthash：文件内容变则 hash 变，长期强缓存（Cache-Control: max-age=31536000）
- HTML 使用 no-cache 或协商缓存（ETag），确保每次都能拉取最新版本
- 图片等静态资源按大小分层：小于 4KB 的内联为 base64；大于 4KB 的单独输出并加 hash
Vue CLI 项目可在 vue.config.js 中设置：
config.chainWebpack = config => { config.module.rule('images').set('generator', { filename: 'img/[name].[contenthash:8][ext]' }) }CDN 部署与缓存协同设计
不只是把文件扔上 CDN，而是结合域名与响应头做精细化控制：
- 拆分 CDN 域名：static.example.com（业务 CSS/JS/图片）、lib.example.com（Vue、Lodash 等）
- 为 lib 域名配置 immutable + max-age=31536000，利用浏览器永久缓存能力
- 为 static 域名配置 max-age=86400 + ETag，兼顾更新及时性与复用率
- 构建后自动上传 dist/static 到 CDN，并替换 HTML 中的资源路径前缀（通过 publicPath 或 CDN 插件）
