• 由于 vite这个构建工具被用在了vue3上门，而且它的构建思路我觉得优于webpack,底层也是使用了esbuild,性能上更优

• 那么为了照顾一些小伙伴之前没有学习过vite的，我们先来看看什么是vite

什么是vite

• Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用,支持热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包

• vite的天然优势：

• • 快速冷启动服务器

  • 即时热模块更换（HMR）

  • 真正的按需编译

vite工作原理

• 当声明一个 script 标签类型为 module 时

如：  <script type="module" src="/src/main.js"></script>

• 浏览器就会像服务器发起一个GET http://localhost:3000/src/main.js请求main.js文件：

• 浏览器请求到了main.js文件，检测到内部含有import引入的包，又会对其内部的 import 引用发起 HTTP 请求获取模块的内容文件

• 如：GET http://localhost:3000/@modules/vue.js

• 如：GET http://localhost:3000/src/App.vue

• 其Vite 的主要功能就是通过劫持浏览器的这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器渲染页面，vite整个过程中没有对文件进行打包编译，所以其运行速度比原始的webpack开发编译速度快出许多

简单实现vite

• 由于代码量有一些大，我就不自己去写了，直接拿了别人的代码过来，原文地址是:

https://juejin.cn/post/6898116372887240712

• 首先是koa启动监听端口，用于访问热更新服务

• 编写对应插件处理

• 首先处理模块的引用，因为浏览器只有相对路径和绝对路径

这里readBody其实就是一个读取文件流的方法，封装过而已，看成普通的读取流方法即可

koa中间件处理

• 首先处理重写路径，因为浏览器只有绝对路径和相对路径

• 重写完了路径后，需要拦截.vue文件和带@module(重写路径之前就是node_modules里面的文件)

• 当解析处理完路径后，我们需要解析vue的模板文件，（如果是react的jsx代码,同理）

• 下面是两个工具函数：一个是流的读取，一个是重写路径的函数

• 重写路径中间件

这样一个简单的vite就完成了

开始在react中使用

• vite算是一个新的技术，而且在国内目前不够流行，为了避免踩坑，我们直接采用官方推荐的模板生成

npm init vite-app --template react

• 生成模板完成后，执行命令启动项目

• 这样一个react的项目就搭建好了，默认使用的是17.0.0版本的react,这样createElement方法再也不用从react里面导出了，我想这样jsx风格代码也会更容易被迁移到其他框架项目中

• 这个模板生成的是自带热更新的，相对比较简单，如果是有特殊需求，可以使用更多的plugin,在vite.config.js中设置

• 默认的配置

• 本文更多是在讲vite的实现原理，目前我还没有把它使用在生产环境中

• 在我看来，vite如果生态能发展起来，可能我们就用不到wepback6这个版本了（当然未来不可猜测）

• 通过阅读本文，你肯定能清楚了解vite的原理和react构建使用了，感觉不错的话，帮我点个赞/在看，关注一下【前端巅峰】公众号吧

参考资料:

• https://juejin.cn/post/6898116372887240712

• https://juejin.cn/post/6844904146915573773

• https://github.com/vitejs/vite