Vite用他们自己的话说是下一代的前端开发和构建工具 ，目前已经在前端社区里很多开发者开始都用起来了。尤其是在公司内部的一些自用的后台项目，但是在大型项目中人们还是保持着比较保守观望的态度，因为他相对来说社区生态还不够完善可能会有比较多的坑点需要去踩去优化，但是就目前在开发的过程中他确实比起传统的webpack构建，在性能速度上都有了提升。
一. vite是什么？
vite 法语： “轻快”的意思。vite本身是与框架无关的,他是前端的构建工具，他的整个核心就是类似于webpack的功能。来提高项目构建速度。
二. 工作原理
像webpack打包工具，是在服务器启动之前，需要从入口文件完整解析构建整个应用。所以它把大量的事件花在生成依赖和编译上面。最终运行的代码是打包之后的代码。
而现在vite启动起来你会发现浏览器将来打开的方式将会是一个模块的方式，也就是ES modules的方式，它在开发阶段可以说是不打包的。所以以后引入文件的时候浏览器直接请求入口文件main.js。
就像标签上的src一样，每当遇到JS文件中代码的import都可以说是一次网络请求。
三. 特性:冷启动、热更新
其实这两点都是基于上面的原理来实现的。因为vite他做的是自己一开始先开启一个服务器，不打包。不打包的目的是你请求什么我就根据你得请求，来找到相对应的模块就可以了。也就是请求这个入口文件由于这个文件里面又引入了其他的文件，所以他的运行方式就是我们的项目他需要哪几个文件他就跑哪几个文件，因为现在浏览器基本都支持这种ESM机制，所以他不打包，速度那就是快的很多了。这就是他和传统工具的设计和原则的不同处。
四. 如何使用
npm init @vitejs/app '名称' --初始化项目
$ cd '名称' --打开项目
$ npm install -- 安装依赖
$ npm run dev -- 运行
首先可以从netWork中看到他们和源代码并没有什么区别，但是好像又有点不同。他把加载的vue转换成'/node_modules/.vite/vue'。他会通过一定的方式进行转换，转换完放到上面那个运行时环境当中，然后代码基本上都是一样的给你返回。所以并没有像webpack那样把所有的东西打包在一个app.文件返回。
其实就是相当于vite启动了一个静态资源服务器，类似于express的connect服务器。在你需要什么的时候我就给你返回什么就可以了。那么这么说浏览器是怎么识别.vue、.jsx这些文件的呢？其实就是这个服务器在解析或者读取代码的时候返回时加的一个响应头。
但是他又是怎么识别文件中的<template><template/>语法的？
这里也说下为什么vite不需要打包，不怕文件多了文件里面的import就多的原因。
- 因为vite是支持HTTP2.0协议的。现在大部分浏览器都支持HTTP2.0协议，一旦支持2.0协议，那就无所谓了文件再多也不怕，因为在2.0协议里面启用了头部压缩和链路复用，所以文件请求再多也无妨。
- 他分别开启了HTTP缓存、和文件的缓存、还有开启HTTP2的多文件加载的一个高效缓存。
- 链路复用：平时一个正常的http请求他是会开启一个tcpip的链接的。这个链接他是你发送一个请求过去，服务器就会进行处理，服务器处理的过程中这个链接他是不会断开的，也就是等待服务器返回得要通过这条链接，也就意味着如果你的服务器响应时间过长的话，那么这一条建立起来的链接就会被闲置，还有就是浏览器目前就与用一个域名同时可以发起6-8条链接。
链路复用就是服务器在等的过程中，我可以在下一次你闲置的过程中，通过调度算法的方式来利用这条链接和服务器进行通信。这里只是简单的介绍一下，链路复用实现起来还很复杂的。
五. 项目结构
首先他的项目结构引入方式发生了变化。宿主文件是Inde.html。 main.js是入口文件，app.js就是根组件。这里的变化就是script的引入类型变成了module的方式，模块化的方式，然后引入了main.js。
六. 引入静态资源
比如logo、图片等。看看和以前的不同点。可以import 一个绝对地址引入图片，比如在里面引入了一张图片用的是相对地址那在vite内部他还是会做一些操作进行一个转换成绝对地址，这里可以打开network找到图片所在文件看一下解析后的路径，发现他还是决定路径。
包括像TS和一些插件的机制的使用和配置这里就不做过多的描述了。
七. 打包
$ npm run build
打包vite用的rollup的方式，rollup就是用的esmodule的打包工具。把项目打包到'dist/assets'里面。这里打完你能看到他就是用的import 和form 他并没有做任何的处理，就是把原生的代码合成一个进行了一个压缩
最后
vite 在启动和热更新方面, 确实速度挺快。
而且Vite在前端构建工具领域实施了一条和webpack完全不同的道路，很好地解决了前端开发阶段构建速度慢的问题。同时也在不断的更新中，希望它的生态能越来越完善，让更多的开发者得到良好的体验
