前言
大家好，我是林三鑫。 用最简单易懂的语言讲最难的知识点是我的座右铭。 基础是进阶的前提，是我的初衷。
因为这几个月我使用Vue3+TS+Vite进行开发，我真的被Vite吸引了！ ！ ！ Vite最大的优势就是：快！ ！ ！ 非常快！ ！ ！
说实话，使用Vite开发后，我不想再回到原来的Webpack项目开发了，因为之前的项目启动项目需要30多秒，改代码更新需要2多秒，而现在使用Vite，启动项目只需要1秒左右，而且改代码更新也超级快！ ！ ！
那么为什么Vite可以做到这么快呢？ 官方的解释确实很官方。 。 所以明天我想用更简单易懂的语言来讲一下，希望大家看完一遍就能明白。
问题状态 ES 模块化支持问题
我们都知道原来的浏览器不支持ESmodule，例如：
// index.js
import { add } from './add.js'
import { sub } from './sub.js'
console.log(add(1, 2))
console.log(sub(1, 2))
// add.js
export const add = (a, b) => a + b
// sub.js
export const sub = (a, b) => a - b
你认为这样的一段代码可以直接在浏览器中运行吗？ 答案是不。 怎么解决呢？ 这时候，打包工具就派上用场了。 他将index.js、add.js、sub.js这三个文件打包成一个bundle.js文件，然后直接在项目index.html中引入bundle.js就达到了代码效果。 有些打包工具就是这样做的，比如webpack、Rollup、Parcel
项目启动和代码更新问题
不用说，大家都知道：
解决问题启动项目顺利
第一张图是之前的打包方式，就像之前的index.js、add.js、sub.js的例子一样，项目启动时，需要先将所有文件打包成一个文件bundle.jstypescript加载很慢，然后导入到html ，多文件->bundle.js 的过程非常耗时。
第二张图是Vite的包装形式。 刚才说了，Vite 直接把转换后的 esmodule JavaScript 代码扔给支持 esmodule 的浏览器，让浏览器自己加载依赖，也就是把压力扔给浏览器，从而达到项目快速启动的效果。
解决更新慢的问题
刚才说了，项目启动的时候typescript加载很慢，模块分为依赖项和源码。 当您更新代码时，不需要重新加载依赖项。 您只需准确找出更新了哪些源代码文件，并更新对应的文件即可。 这样做使得更新速度非常快。
Vite 还利用 HTTP header 来加速整个页面的重新加载（让浏览器再次为我们做更多事情）：对源代码模块的请求将根据 304NotModified 进行协商并缓存，而对依赖模块的请求将通过 Cache- 进行缓存control:max-age =31536000，immutable是强缓存的，所以一旦缓存就不需要再次请求。
生产环境
刚才我们讲了开发环境，也说了Vite直接把esmodule转换后的JavaScript丢给浏览器，让浏览器根据依赖自行加载依赖。
那么有人会说，放到生产环境中是不是可以不打包，直接开一个Vite服务就可以了，总之浏览器会根据依赖自行加载依赖。 答案是否定的，为什么：
所以Vite最终的封装采用的是Rollup
结语
我是林三鑫，一个热心的后端新手程序员。如果你有上进心，喜欢后端，想学习后端，以后可以和同学交个朋友，一起抓鱼哈哈，摸摸鱼群，点击这个-->抓鱼沸点
