vite 源码分析及个人学习体会

本文旨在对一周vite源码学习的总结和提炼。

vite给我的最大印象就是简单。

优点

1. 不同于传统打包方式，vite直接请求源码，返回过程中解析转化源码，而模块划分工作由浏览器提供。

2. 依赖预构建，将AMD，commonjs等转成es module形式，对依赖进行强缓存，并缓存在node_module/.vite下，加快服务构建。

3. 提供基于es build的hmr api，比传统的hmr过程更简单，反映更迅速。

4. 使用esbuild转译ts，tsx，jsx，转译迅速，约是 tsc 速度的 20~30 倍。

5. 内部构建了css 预处理器，tsx，jsx，postCss，css Module的支持，不用用户配置，开箱即用。

6. 构建优化，CSS 代码分割，预加载指令生成，异步 Chunk 加载优化

7. 采用rollup插件的使用格式，对理解插件，建立一个插件更简单。

8. 使用.env文件添加环境变量，区分环境和模式，server!== development!

9. 配置简单易上手，没有过多心智负担。

缺点

1. ts无类型检测，需额外开启tsc检测服务。
2. 无法定制特定文件的解析loader，有局限性。
3. 无法集成lint插件。
4. 服务现代浏览器，对低版本浏览器无效，最低支持 es2015。
5. 社区插件少，较比webpack还有一段发展时间。

我学到了什么

1. 制作一个cli的启动流程、参数处理

2. 预处理源码文件

3. 基于es module的hmr实现原理

4. server middleare 分层处理不同文件类型，根据server router 返回相应资源

5. 插件的运行机制

6. 源码编译过程

阅读源码前的疑惑

1. hmr实现

2. 如何加载html

3. 如何预处理，预构建，文件缓存

4. server环境使用的middleware模式原理

5. server环境直接将未转化文件发至浏览器，如何解析

6. 如何做到开箱即用

源码分析

1. vite源码分析(1) :resolveConfig参数解析
2. vite源码分析(2)：vite依赖预构建功能分析