5分钟学会 vite

组成

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

为什么 vite 既用了 esbuild 又用了 rollup ?
esbuild 在开发阶段（vite dev）使用，主要用来预编译第三方依赖和编译业务代码里的 typescript 代码。esbuild 在抹平了第三方依赖的语法差异（第三方依赖不一定是 ESM 的语法）的同时，保证了 vite dev 的开发速度。
rollup 只会在 vite build 的时候执行构建，主要是构建生产环境可稳定使用的包，依然使用 rollup 是因为 rollup 成熟稳定，具有大量优秀的插件。

开发服务器

原理：浏览器支持 esm 模块

vite 在开发的时候不进行构建，只是将所有内容转换成 esm 的内容，依赖利用浏览器自己来识别，就和 live server 打开本地 index.html 文件一样。
比如 index.html 导入了一张图片，vite 就让浏览器去磁盘中图片本来的位置引入这个文件。而 webpack 开发时会执行构建，同样引入一张图片，因为构建，这张图片就会放在 index.html 同级的 img 文件夹中。

vite 通过浏览器这种原生识别 esm 的方式来处理依赖，还额外做了什么？
通过浏览器原生来构建可以，但是存在两个严重问题：

1. 浏览器不识别其他文件，比如 .vue 文件。
2. js 依赖第三方包的时候，浏览器会发送过多的网络请求。比如引入 lodash，首先必须写出 node_modules 下的完整路径进行引入，这是一个很不方便的地方；更严重的是 lodash 的入口文件依赖了很多其他的模块，浏览器都会一一去发起请求去下载这些模块，请求非常多。

vite 在基于浏览器原生支持 esm 的基础上，解决了上述问题，提供了更便捷的方式。

总结：
浏览器原生支持 esm，更准确的说法是浏览器支持模块化，工程化。既然浏览器支持模块化，为什么我们还要将代码构建成 jQuery 开发时代的样子呢？显然是没有必要的。这就是 vite 和 webpack 最大的不同点。
vite 开发时，就像一个增强版的 live server，和我们平时打开 live sever 一样，入口文件是 html，html 里面引入的文件，让浏览器去解析引入。
而 webpack ，html 文件只是一个简单的模板，真正的入口是一个臃肿的 js 文件。开发时，浏览器打开的是前端没有工程化时期的标准项目结构。

|-js
|-img
|-css
|-index.html

其他类型文件

正因为 vite 底层是利用浏览器支持 esm 进行工程化的特点，所以 vite 对于 css 文件，图片文件这些，压根不需要什么 loader，因为背后是浏览器来识别，只要浏览器能直接认识这些文件就行。
对于 less，postcss，ts 这些文件，也只要安装一下它们自己对应的处理程序就好，比如 less 的命令行工具，当它把 less 文件转为 css 文件后，浏览器就能识别了。
但是浏览器网络请求中查看请求，请求的文件名称依然是xxx.less，但是里面的内容其实是 css 内容，而不是 less。想也想得到啊，肯定不是 less ，浏览器压根不认识 less，要真是 less 请求下来了也执行不了。但样式被正确执行了，所以里面肯定是 css 内容。打开文件查看也确实是 css 内容。

请求转发

这背后的原因是因为对于浏览器中来说，html 才是入口文件，html