📘 构建缓存与热更新
30章 · 从入门到实战
🧩 友好色系
1
缓存基础
概念与性能提升
什么是构建缓存、为什么需要缓存、缓存带来的性能提升
➡️
2
Webpack
持久化缓存机制
Webpack持久化缓存原理、cache配置项详解、缓存版本控制
➡️
3
Vite
依赖预构建与哈希缓存
Vite的依赖预构建缓存、浏览器缓存策略、文件哈希缓存
➡️
4
热更新核心
WebSocket与HMR
WebSocket通信机制、模块热替换(HMR)流程、增量编译
➡️
5
Webpack HMR
运行时与自定义
HMR运行时原理、Accept与Decline、自定义HMR处理逻辑
➡️
6
Vite HMR
ESM与API详解
ESM模块热更新、基于import的HMR、Vite HMR API详解
➡️
7
缓存失效
时间戳·哈希·LRU
时间戳缓存、内容哈希缓存、缓存清理策略、LRU算法应用
➡️
8
持久化缓存
文件系统与内存
文件系统缓存、内存缓存对比、缓存存储位置选择、缓存序列化
➡️
9
增量编译
watch与构建复用
Webpack的watch模式、增量构建原理、文件监听机制、编译缓存复用
➡️
10
模块图
依赖树与循环依赖
模块依赖图构建、循环依赖处理、动态导入缓存、模块联邦缓存
➡️
11
Loader缓存
babel/ts/eslint
babel-loader缓存、ts-loader缓存、eslint缓存、自定义loader缓存
➡️
12
Plugin缓存
开发与钩子
缓存插件开发、compilation缓存、缓存钩子函数、缓存事件监听
➡️
13
多进程编译
thread-loader
thread-loader原理、并行编译缓存、进程间缓存共享、性能权衡
➡️
14
CI/CD缓存
GitHub Actions
持续集成中的缓存策略、GitHub Actions缓存、Jenkins缓存配置、缓存命中率监控
➡️
15
调试与优化
命中率分析
缓存日志分析、缓存命中率检测、缓存问题排查、性能分析工具
➡️
16
HMR性能
更新速度优化
HMR更新速度优化、减少全量更新、模块分割策略、懒加载与热更新
➡️
17
React热更新
Fast Refresh
React Fast Refresh原理、组件状态保持、HMR与React DevTools集成
➡️
18
Vue热更新
SFC与状态
Vue HMR实现、单文件组件热更新、Vuex状态热更新、Vue Router热更新
➡️
19
CSS热更新
模块与Style
CSS模块热替换、Style-loader HMR、CSS-in-JS热更新、PostCSS缓存
➡️
20
资源热更新
图片/字体/媒体
图片资源缓存策略、字体文件缓存、媒体文件HMR、静态资源版本管理
➡️
21
缓存安全
投毒与CSP
缓存投毒攻击防范、缓存验证机制、内容安全策略(CSP)与缓存、缓存签名
➡️
22
Service Worker
PWA与Workbox
PWA缓存策略、Workbox缓存管理、离线缓存与热更新结合、缓存更新策略
➡️
23
HTTP缓存
强缓存与协商
强缓存与协商缓存、Cache-Control配置、ETag与Last-Modified、缓存代理
➡️
24
CDN缓存
边缘与预热
CDN缓存策略、边缘缓存、缓存刷新与预热、CDN与构建缓存协同
➡️
25
微前端缓存
独立与共享
微应用独立缓存、共享依赖缓存、沙箱环境缓存、微前端HMR挑战
➡️
26
打包优化
Tree Shaking与Chunk
Tree Shaking与缓存、代码分割缓存、Scope Hoisting缓存、Chunk缓存策略
➡️
27
监控告警
命中率与指标
缓存命中率监控、缓存大小监控、缓存错误告警、自定义缓存指标
➡️
28
最佳实践
模板与规范
项目缓存配置模板、团队缓存规范、缓存策略决策树、常见缓存陷阱
➡️
29
未来趋势
ESM与Rust工具
ESM缓存新特性、浏览器缓存API演进、Rust构建工具缓存、AI辅助缓存优化
➡️
30
综合实战
高性能缓存系统
从零搭建高性能缓存系统、HMR与缓存深度整合、大型项目缓存优化案例、性能对比测试
➡️