最近好像vite很火热的样子，这里小小了解了以下vite，在此记录一下。
在了解vite之前，先了解下打包工具。打包工具就是将现有的代码进行转义处理并且打包。转义处理指的是将正常无法运行在浏览器的语法处理为可运行的语法，比如jsx，比如.vue文件中的所有内容。打包指的是将不同文件的代码内容联合起来，让浏览器可解析，比如浏览器不支持require时，nodejs不支持import export时，打包工具一般都会将代码转换为可识别的模式输出。
目前呢应用比较广泛的打包工具为webpack和rollup，其中rollup用来打包库多一点，webpack用来打包项目多一点。原因是，rollup对于tree shaking的支持更好(webpack也有terser plugin，但是做的没有rollup好，具体可参考如下文章，当然这是两年多前的文章，现在webpack是不是做的更好了，暂时没有时间去查验)，支持输出ESmodule模式的代码模块，webpack对于js之外的引入支持更好。具体功能以及性能对比可以参考如下网站，以及webpack官网的对比。这里面比较了两者打包主要功能的优劣。
那么vite究竟干了啥，vite主要解决了一个痛点，当项目膨胀过大的时候，使用打包工具开发，每次修改内容后重新打包的时间太长了…..
为了解决开发时修改内容重新打包时间过长这个问题，vite使用了利用了ES Modules规范，让我们在日常开发的时候可以不用打包代码。具体可以看看下面两张图，比较一下开发时vite和webpack的source结构。
很明显啊，vite只将源文件进行了转义就返回给了浏览器，但是并没有将所有的源文件进行打包。webpack则对源文件进行了打包生成bundle再去返回到浏览器。
具体原理就是在解析代码遇到import关键字的时候才去请求相应模块，可以从浏览器的network看得到。
至于打包呢，vite的打包处理直接使用了rollup打包，个人感觉这个打包就根据个人需要选择打包工具了，毕竟都到打包了，一般放到jenkins跑就完事了完全可以和开发解耦。