Vite知识体系（下）
这是我参与第五届青训营 伴学笔记创作活动的第19天。
课程重点
- Vite整体架构。
- Vite进阶路线。
详细知识点
Vite整体架构
关键技术： 依赖预打包
为什么要进行依赖预打包?
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术：单文件编译
用Esbuild编译TS/JSX，优势：编译速度提升10-100x. 局限性：不支持类型检查，不支持语法降级到ES5.
关键技术：代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具。
关键技术：插件机制
开发阶段->模拟Rollup插件机制；
生产环境->直接使用Rollup.
Vite进阶路线
vite插件开发
为什么需要插件机制?
- 抽离核心逻辑
- 易于拓展
通过上述Hook，我们可以在不同的构建阶段插入自定义的逻辑。
插件示例：
- 开发Vite插件。
- 配置文件引入插件。
代码分割(拆包)
拆包前：
问题：
- 无法进行并发请求
- 缓存复用率低
服务端渲染(SSR) 一种常见的渲染模式，用于提升首屏性能和SEO优化。
构建阶段
代码执行阶段
