本文处于草稿状态， 初步介绍了Vite的架构思路， 后续有时间还会深入研究.

为什么选Vite

官方文档

传统构建工具的问题

• 随着发展构建越来越大的大型应用，JS代码指数增长，webpack、rollup还是存在一些问题（启动慢、热替换慢）
• Vite宗旨： 利用生态系统的新进展解决解决上述问题。

Vite的解决方案

1. 对于启动缓慢的解决

• 将模块区分为依赖和源码两部分， 使用esbuild预构建，它比原生JS构建快10-100倍
• 源码 则基于ESM特性懒解析，实际上浏览器也接管了打包部分工作

2. 缓慢更新的解决方案

• 模块热替换是在原生ESM上执行的
• 充分利用协商缓存（源码）和强缓存（依赖）

为什么ESBuild快？

• 使用Go语言编写的，可以直接转换成机器代码，无需经过字节码
• ESBuild可以充分利用CPU的多内核，尽可能让他们饱和运行
• ESBuild的所有内容都是从零开始编写的，而不是使用第三方，所以一开始就考虑了各种性能问题

Vite打包方案

为什么生产环境仍需要打包
ESM大量碎片代码的网络往返，致使其效率仍然低下， 还是需要对代码进行 tree-sharking、懒加载、chunk分割 以获得更好的缓存

为什么不使用ESbuild打包？ Vite的插件与使用esbuild作为打包起并不兼容。尽管 esbuild 速度更快，但 Vite 采用了 Rollup 灵活的插件 API 和基础建设，这对 Vite 在生态中的成功起到了重要作用。

Vite的组成 vite由两部分组成

1. 一个开发服务器，它基于原生ESM提供了丰富的内置功能，HMR的速度非常快速
2. 一套构建指令，开发环境使用esbuild，生产使用rollup打包，并且它是预配置的，可以输出生产环境优化过的静态资源

Vite的简单使用

Vite 意在提供开箱即用的配置，同时他的插件API和JavaScript API带来了高度的可扩展性，并有完整的类型支持。

• npm create vite@latest
• 
• cd vite-project && npm i
• npm run dev

零配置

• 无需任何配置即可支持 TS/图片 的支持
• 无需任何配置即可支持 CSS相关 less scss (但需要安装对应的开发依赖)
• 无需任何配置即可支持postcss
• 无需任何配置即可支持jsx (react/react-dom是开发依赖)
• 需要配置plugin vitejs-plugin-vue2 支持vue2
• 需要配置plugin @vitejs/plugin-vue 支持vue3

以上案例点击这里

命令
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview" 生产模式预览

vite的配置项和 webpack很像

todo

参考资料

• 官网
• Vite的前世今生