初识Vite知识体系|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第12天
Vite是什么
定位： 新一代前端构建工具
两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bunder
核心特征：
- 高性能，dev启动速度和热更新速度非常快！
- 简单易用，开发者体验好
当下问题：
graph TD
缓慢的启动 --> 项目编译等待成本高
缓慢的热更新 --> 修改代码后不能实时更新
瓶颈在哪里？
- Bundle带来的性能开销
- JavaScript语言的性能瓶颈
两大行业趋势
- 全球浏览器对原生ESM的普遍支持（目前占比92%以上）
- 基于原生语言（Go、Rust）编写前端编译工具链
- 如Go语言编写的Esbuild、Rust编写的SWC
浏览器原生ESM支持
两大要素：
- scrip标签增加type="module"属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild——基于Golang开发的前端工具，具备如下能力：
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
性能极高，在Vite中被深度使用
Vite上手使用
预打包
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
单文件编译
用Esbuild编译TS/JSX
- 优势： 编译速度提升10-100x
- 局限性：
- 不支持类型检查
- 不支持语法降级到ES5
