摘要：关于为什么要选择使用Vite呢？不同的开发者有着对这个前端构建工具的理解有所不同，我们知道在Vue2的时候使用最多的脚手架工具就是@vue/cli，随着技术的发展，现在官方推荐使用Vite创建新项目，并且随着Vue3的不断普及，还有很多的基于Vue3的工具横空

关于为什么要选择使用Vite呢？不同的开发者有着对这个前端构建工具的理解有所不同，我们知道在Vue2的时候使用最多的脚手架工具就是@vue/cli，随着技术的发展，现在官方推荐使用Vite创建新项目，并且随着Vue3的不断普及，还有很多的基于Vue3的工具横空出世。

Vite 是一种快速的新型前端构建工具，它支持了很多合理的默认配置，可以通过插件的方式支持与其他框架或者其他工具的集成，当然对于默认配置来讲，如果在实际操作的过程中需要自定义配置，它也支持了自定义配置。它是由两部分组成

基于这些支持，Vite提供了非常强大的扩展性功能通过插件或者JavaScript的方式进行扩展，提供了非常完整的功能支持。

一个比较现实的问题就是，在各大浏览器支持ES模块方式之前，JavaScript语言并没有能够很好的提供原生的机制让前端开发者可以通过模块化的方式来进行开发，也就是我们需要通过各种抓取、处理等操作让前端的代码串联到一起去形成浏览器可以解释的HTML语法并且进行解释运行。

但随着例如WebPack、Rollup、Parcel等工具的出现，逐渐的改善了前端开发者的开发体验，使得很多的开发者开始敢于挑战组件模块式的开发。

当然，打包构建这种方式如果遇到了大型的项目，需要进行处理的JavaScript代码量将会非常大，在其中会包含成百上千的模块以及组件，这种情况下，基于JavaScript的开发工具就会遇到瓶颈了。

因为会花费大量的时间去构建去启动服务器，即使，使用了热替换，对于文件的修改也需要几分钟的加载才能在浏览器中体现出来。如此往复，会对用户体验造成很大的影响。

而Vite的出现就是为了更好的解决这种问题的出现。

首先当你去启动一个服务的时候，基于打包器的方式就必须先要去抓取整个的引用进行构建，构建完成之后，才能够提供相应的服务。

而Vite一开始就将应用中的模块进行了区分，一部分是依赖部分，一部分是源码部分。通过这样的方式，对于依赖的处理大多数情况下不会去发生大面积的改变。所以Vite使用了esbuild构建方式进行了预构建。

经过预构建之后的内容，如果发生了变化就去修改发生变化的内容，如果没有发生变化则直接可以使用这样可提升构建的效率。而且esbuild是基于GO语言开发，比起JavaScript的构建工具要快10~100倍。

而对于源码来讲，其中包含的内容都是开发者自己编写的内容，并且会经常性的被编译，然后执行。对于这种情况Vite在操作过程中并没有将所有的代码同时进行加载而是基于某种规则拆分成不同的模块。

Vite通过原生ESM方式提供代码，这其实就是让浏览器来接管整个的打包程序的过程，而Vite只需要在浏览器请求提供源码并且转换成需要的源码即可。

由于需要打包进行构建，整个的打包构建的过程又是一个特别耗时的过程，原因显而易见，就是因为随着应用的的业务不断增加应用的代码体积也会随之增加，而这个时候的打包效率会直线下降。

而在开发过程中服务器需要将这些内容全部装到内存中，这种情况下代价将会是非常高的。因此使用了热替换技术，也就是允许一个模块热替换它自己，而不会影响到页面的其他部分。这样一来极大的提升的开发效率。。

在Vite中热替换技术是在原生的ESM上进行的。当编辑一个文档的时候 ，Vite只需要精确的使得被编辑的模块最近的边界失活，保证无论如何都能够快速的实现更新操作。

Vite利用了HTTP头来加速了整个的页面的重新加载操作，源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

正是因为有这么多的好处，所以要推荐使用Vite。加之Vue3框架的流行。Vite的使用应该算的上是大势所趋。

来源：从程序员到架构师一点号