vite 学习总结
一、比 webpack快
二、vite 在开发环境并不做打包
2.1、开发相关的文件还有 依赖都是直接引入的，做了编译，但是并没有打包。（这是基于浏览器的 type 为 module 的 script 实现的）
2.2、vite会跑一个开发服务，这个开发服务是基于 *connect *实现的，vite 给它加了很多中间件来处理请求。
这就是 vite 为什么叫 no bundle 方案，它只是基于浏览器的 module import，在请求的时候对模块做下编译。
2.3、预构建（pre bundle）
不但要把 node_modules 下代码的 commonjs 提前转成 es module，还有提前对这些包做一次打包，变成一个 es module 模块。
所以，vite 加了一个预构建功能 pre bundle。
在启动完开发服务器的时候，就马上对 node_modules 下的代码做打包，这个也叫 deps optimize，依赖优化。
2.4、强缓存
_metadata.json 文件写入 node_modules/.vite 下，
metadate.json中有几个 hash 文件
vite 会在这些预打包的模块后加一个 query 字符串带上 hash，然后用 max-age 强缓存
因为这些依赖一般不会变，不用每次都请求，强缓存就行。
但是在 lock 文件变化或者 config 有一些变化的时候也需要重新 build
重新预编译，然后在资源请求时带上新的 query，这样就让强缓存失效了。
这里强缓存的用法很典型，面试官们可以记一下作为考点。
这样，vite 的开发服务的请求时编译，再就是预构建就都完成了。
2.5 、预构建要用 esbuild
三、build 的时候 vite 会用 rollup 做打包（不会导致开发时的代码和生产环境不一致）
没错，vite 插件时兼容 rollup 插件的，这样在开发的时候，在生产环境打包的时候，都可以用同样的插件对代码做 transform 等处理。
处理用的插件都一样，又怎么会开发和生产不一致呢？
在 dev 的时候，它实现了一个 PluginContainer，用和 rollup 插件同样的参数来调用 vite 插件：
然后 build 的时候，可以把这些插件直接作为 rollup 插件用。
对了，vite 在 dev 的时候还支持热更新，也就是本地改了代码能够自动同步到浏览器。
这个就是基于 chokidar 监听了本地文件变动：
然后在模块变动的时候通过 websocket 通知浏览器端：
浏览器端接受之后做相应处理就好了。 （原文链接 juejin.cn/post/735093…
