vite2.0介绍及原理分析
在介绍Vite之前，⾸先来简单回顾⼀下前端技术的发展历程。前端技术的发展⼤致可以分为三个阶段，原⽣JS -> JQuery -> SPA，随着SPA的兴起，三⼤前端框架Vue、React 、Angular应运⽽⽣。但是三⼤框架⼜带来了新的问题：
1. 模块化的开发会产⽣⼤量的⽹络请求，⽽HTTP 1.1有并⾏连接限制；
2. 很多浏览器对ESM并不⽀持。
于是Grunt、Gulp、Webpack等打包构建⼯具出现了，他们可以合并⽂件，减少⽹络请求，并且可以通过各种插件解决浏览器兼容问题。
但是，随着我们业务的复杂度提⾼，代码量越来越⼤，项⽬启动、编译的时间就变得越来越长！在使⽤webpack作为构建⼯具的开发过程中，不知道⼤家有没有遇到过这样的问题，改⼀⾏代码编译半分钟（这已经是做过webpack各种优化后的结果），严重影响我们的开发效率和幸福度。于是，Vite出现了，它可以完美的规避这些问题！
⼀、什么是Vite
Vite（法语意为 "快速的"，发⾳ /vit/）是⼀个基于浏览器原⽣ ES Modules 的开发服务器。在开发环境下基于浏览器原⽣ES Module 开发，在⽣产环境下基于Rollup打包。⽀持热更新，并且热更新的速度不会随着模块增多⽽变慢
⼆、Vite特点
Vite的特点⽤⼀个字来总结，就是”快“！不管是启动时间还是热更新速度都相当的快，感兴趣的同学可以⽤命令（npm initjquery框架原理
@vitejs/app 或者 yarn create @vite/app）初始化⼀个项⽬感受⼀下。注意Vite需要Node.js版本 >= 12.0.0。
那么，为什么Vite会这么快呢，接下来我们来看看Vite的原理分析。
三、预备知识
是浏览器⽀持的⼀种模块化⽅案。简单来说就是当遇到import依赖时，浏览器会发起http请求去拉取对应的资源，并且ESM可以在浏览器中直接运⾏。⽬前除IE浏览器以为，90%以上的浏览器都已经实现了ESM。想要了解ESM⼯作原理的可以看。
是⼀个类似webpack的构建⼯具，但是它的构建速度是webpack的⼏⼗倍！⽀持babel、压缩等功能。如下图是esbuild官⽹贴的不同构建⼯具的打包速度图。
四、Vite原理分析
Vite的基本实现原理，是启动⼀个koa服务器，拦截浏览器请求，并对不同的请求资源做⼀定的处理，最后将处理后的⽂件返回给浏览器。
从Vite2.0源码可以看到，Vite2.0在为⽤户启动开发服务器前，先⽤esbuild将检测到的依赖预先构建了⼀遍。当我们执⾏yarn start 时，我们实际上是执⾏了下⾯这段代码，packages/vite/src/node/cli.ts。
在执⾏server.listen之前，⾸先执⾏了createServer，createServer⾥做了预编译优化，这部分代码在
packages/vite/src/node/server/index.ts
optimizeDeps代码在packages/vite/src/node/optimizer/index.ts，Vite会⾸先根据本次运⾏的⼊⼝，去
扫描其中的依赖（这部分代码在packages/vite/src/node/optimizer/scan.ts），最终根据分析出来的依赖，使⽤esbuild打包成单⽂件的bundle，存在
node_modules/.vite下，并且，浏览器会给这些第三⽅依赖设置强缓存，只有当缓存依赖发⽣改变时，才会重新去更新⽂件。
所以，当你代码中引⼊react时，你在⽹络请求⾥看到的请求路径是这样的：
浏览器是⽆法直接解析tsx、vue⽂件的，所以Vite还需要做的⼀件事就是⽂件编译。当浏览器发起tsx、vue、ts等请求时，Vite会使⽤esbuild作为⽂件类型的解析器，最后将编译后的⽂件返回给浏览器。
3. 热更新原理
在createServer函数⾥可以看到，有创建⼀个WebSocket连接，通过这个连接建⽴服务端与浏览器的通信，通过监听⽂件的改变向客户端发送消息，从⽽实现热更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。