vite详解

vite如今已经更新到了4.xxx的版本，发展飞快，如今已经逐步应用到实际项目中，使用过vite的朋友都知道，vite不仅配置需求少，而且在开发环境下打包极快。那么他为什么这么快？

首先vite能如此迅速的打包，功劳离不开一个代码构建工具esbuild，在vite文档中提及到，这个构建工具是其他构建工具速度的10-100倍，事实也确实是这样，那么，为什么它可以如此之快呢？

1.esbuild由go语言编写，go语言的特点是没有变为字节码的过程，直接变成机器码。

2.esbuild尽可能多的使用cpu内核，使其饱和运行（和go语言内部代码有关）。

3.esbuild完全从0开始编写，不引用任何其他的库，这样便没有任何历史包袱，可以肆意的进行性能优化

vite能如此迅速的打包，离不开esbuild构建工具的加持，但不仅仅只因为esbuild，和其本身的打包原理也有着密不可分的关系。

首先，即使在开发环境下使用esbuild工具进行对代码的构建功能，但是不同于webpack，vite在开发环境使用esbuild构建代码过程中，并不会将代码打包成一个文件，文件仍然各个独立存在，对于一些浏览器识别不了的代码，esbuild负责转化为js逻辑代码，如ts，而css文件也无法独立运行，相较于webpack中将css通过js式插入dom中为行内式css的做法，vite与其不同的是，它是将css插入dom中为行内式的js逻辑代码保存到内存中，让浏览器执行，除此之外，vite也不会将保存在内存中的文件重新命名，也就是说ts文件即使被编译为js，但其在内存中的文件名依旧为ts。

其次我们知道，在webpack中，我们需要将代码进行一系列压缩，以及版本兼容处理，分包摇树等功能后存于本地服务器中，再由浏览器像本地服务器发送请求，请求下来代码。生产环境下，webpack做这些完全没有问题，这些操作实现的兼容低版本浏览器，以及将非受屏渲染内容进行分包，提高受屏渲染速度，以及代码压缩，减小文件大小。但是在开发模式下，我们真的需要将代码进行如此复杂的处理吗？

vite考虑到了这一点，首先vite并不会在开发模式进行版本兼容，也就是babel处理。如果你观察过webpack中所有loader的执行速度后你就会发现，babel竟然占了将近一半的事件，而在开发过程中，我们作为开发者，我们的浏览器会需要适配吗，大部分情况下不会，所以vite省略了该步骤，直接将所有es6代码不经过低版本浏览器兼容转换，直接放入本地服务器中，这样大大节省了打包事件。因为import语法并未被转化，所以每个模块文件自然也没有被合并，也就是说每个文件都被单独保存在本地服务器的内存中。虽然vite并没将文件进行低版本兼容，以及合并，但是也实现了摇树等代码优化的功能。

其次，vite对于其他非js文件处理的方式也有不同。在webpack中对于浏览器识别不了的文件会通过loader转化，存于js文件中，是否分包取决于具体配置，然后在存于内存中。而在vite中，对于这种浏览器无法识别的文件，如ts，他会创建一个和源文件完全相同名字的文件，并将源文件中的代码转换成浏览器能识别的代码（依然不会做低版本浏览器兼容），然后存于该文件中，并将该文件保存在内存里，而入口文件被浏览器执行时，遇到引入这种类似于ts文件时，依旧是引入ts文件。但文件内容确实js（vue和react使用的jsx文件都是一样的，不过esbuild并没有内置解析vue的功能，所以需要插件@vuejs/plugin-vue）。但是，当遇到css时，他该怎么办呢？

值得注意的是，虽然vite在开发环境下依赖esbuild来进行快速构建代码，但是在生产环境下，vite是依赖rollup来进行打包的，使用vite时，我们可以发现需要我们配置的东西很少，其实这也是rollup的功劳，因为这款打包工具需要配置的东西就很少，而生产环境，vite依赖于rollup。那问题就来了，vite在开发环境下依赖于esbuild处理代码，在生产环境下依赖rollup处理代码，那vite本身自己做了什么事情呢？这就引发了最后一个问题，webpack和vite的最大区别。

vite和webpack的最大区别就是，他们两者根本就是两类东西，绝无可比性，vite本质上式一款开发工具，它本身并没有任何处理代码的功能，它只能提供开发服务器，和开发环境，辅助打包工具来打包代码，而webpack是一款实实在在的打包工具，功能齐全，完全不依赖于任何其他的工具（有时也会集成一些好用的工具，如terser），所以，其实在生产环境中，我们也可以通过一些手段使用webpack替vite打工，这里就不细说了。

vite在文档中是这么说的：

Vite 目前的插件 API 与使用 esbuild 作为打包器并不兼容。尽管 esbuild 速度更快，但 Vite 采用了 Rollup 灵活的插件 API 和基础建设，这对 Vite 在生态中的成功起到了重要作用。目前来看，我们认为 Rollup 提供了更好的性能与灵活性方面的权衡。

即便如此，esbuild 在过去几年有了很大进展，我们不排除在未来使用 esbuild 进行生产构建的可能性。我们将继续利用他们所发布的新功能，就像我们在 JS 和 CSS 最小化压缩方面所做的那样，esbuild 使 Vite 在避免对其生态造成干扰的同时获得了性能提升。