是Vue内置抽象组件，用于缓存动态组件实例而非销毁，保留其状态、数据和DOM，避免重复渲染；配合onActivated/onDeactivated钩子实现激活与停用逻辑，适用于标签页、路由缓存等场景。
代码缓存不是指某一种单一技术，而是对前端资源（JS、CSS、HTML）在浏览器中被重复利用的一整套机制。它的核心作用是：**让第二次访问时，跳过网络请求和部分解析执行过程，直接复用已加载、已编译甚至已优化过的代码**，从而大幅缩短页面启动时间。
浏览器如何“记住”并重用你的 JS 和 CSS？
关键靠 HTTP 缓存头 + 文件名稳定性：
- Cache-Control: public, max-age=31536000, immutable 告诉浏览器：“这个文件一年内不会变，且内容哈希已体现在文件名里”，于是浏览器直接从磁盘读取，不发任何请求（200 from disk cache）
- 配合构建工具生成带 contenthash 的文件名（如
app.a1b2c3d4.js），确保内容一变，文件名就变——旧缓存自动失效，新缓存独立建立，避免“更新了代码但用户还在用旧 JS”的问题 - 第三方库（React、Vue、Lodash）单独打包 + 长期缓存，它们版本稳定、更新少，用户一次下载后，后续多个页面都能复用
不只是“存下来”，还有更深层的运行时优化
现代浏览器（Chrome、Edge、Safari）会对已缓存的 JS 脚本做进一步处理：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 首次执行后，V8 引擎会将 JS 编译为字节码并缓存（Code Cache），下次加载同一脚本时可跳过词法/语法分析和部分编译，直接执行字节码
- 如果脚本未改动且缓存未过期，整个加载→解析→编译→执行链路被大幅压缩，尤其对大型 SPA 的主包（bundle.js）效果明显
- 这种底层缓存由浏览器自动管理，开发者无需手动干预，但前提是资源必须满足强缓存条件（immutable + 长 max-age）
和组件级缓存（如 Vue 的 keep-alive）不是一回事
代码缓存作用于资源文件层级，属于网络与运行时层面；而 keep-alive 是框架层面对已挂载组件实例的状态保留。两者互补：
立即学习“前端免费学习笔记（深入）”；
- 代码缓存解决“JS 文件要不要重新下载、要不要重新编译”的问题
- keep-alive 解决“切换路由时，组件要不要销毁重建、数据要不要重新拉取”的问题
- 一个管“代码怎么来”，一个管“状态怎么留”，共同构成二次访问“秒开”的基础
没配好，缓存反而拖慢速度
常见反模式会抵消收益：
- 静态资源用固定文件名（
app.js）却只设短缓存（max-age=300），导致每次访问都走协商缓存（304），白白多一次网络往返 - 把动态接口响应也塞进强缓存（比如用户中心页设了
max-age=3600），造成数据陈旧、体验错乱 - Service Worker 缓存策略混乱，比如对 HTML 用 stale-while-revalidate 却没处理好版本更新逻辑，导致白屏或功能异常
