初步了解Vite

前端更新速度快，Vite构建工具也不能不知道，这是我自己查阅资料，稍微了解了下Vite，如有不对，欢迎大家指出，加油！

一、 认识Vite

webpack是目前整个前端使用最多的构建工具，但是除了wepack之后也存在其他的构建工具。比如rollup parcel gulp vite等。vite的官方定位是下一代前端开发和构建工具

二、为什么会有vite

我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别，比如ES6，TS，Vue文件，所以我们必须通过构建工具来进行代码转换，编译。但是随着项目越来越大，需要处理JS呈指数级增长，模块越来越多，构建工具需要很长时间才能开启服务器，所以出现了Vite来解决这种问题，Vite通过利用生态系统中的新进展来解决这些问题：浏览器中本机ES模块的可用性，以及用编译为本机语言编写的JavaScript工具的兴起。

三、webpack为什么这么慢

在之前的浏览器中没有模块化的设计，所以期望把源代码编译成一个js文件中提供给浏览器使用，所以在开发中当我们运行启动命令的时候，webpack总是需要从入口文件去索引整个项目的文件，编译成一个或多个单独的js文件，即使采用了代码拆分，也需要一次生成所有路由下的编译后文件，这导致了服务启动时间随着项目复杂度而指数增长。

四、vite为什么会这么快

Vite通过首先将应用程序中的模块分为两类：依赖项和源代码，从而缩短了开发服务器的启动时间。

1、通过esbuild预构建依赖
依赖是指在开发时不会变动的纯JavaScript，主要包含node_modules下的文件，该内容通常包含多种模块化格式（CommonJS，UMD,ESM等)，所以需要进行转换为原生的ES模块，为了完成该转换过程，引入了esbuild进行预构建依赖，由于esbuild使用go编写，其构造速度相对于JavaScript编写的打包构建速度更快

2、现在浏览器支持ESM格式的代码
由于浏览器支持ESM格式的代码，所以浏览器可接管打包程序的部分工作，Vite只需要在浏览器请求源码时进行转换按需提供源码。只有当前屏幕上实际使用时，才会处理条件动态导入背后的代码。

3、Vite还利用HTTP标头来加快整页重新加载的速度，再次让浏览器为我们做更多的工作：源码模块请求时通过条件的，并且依赖模块请求通过强缓存，因此它们在缓存后不会再次命中服务器

五、vite VS webpack

	webpack	vite
打包过程	1、识别入口文件；2、通过逐层识别模块依赖（Commonjs、amd或者es6的import），获取代码的依赖；3、webpack先将代码转为AST抽象语法树，再处理代码，编译成浏览器可以识别的代码，输出代码；4、最后形成打包后的代码	比如，当声明一个script标签类型为module时，浏览器会像服务器发起一个GET http://localhost:3000/src/main.js,请求main.js文件，浏览器请求到了main.js文件，检测到内部含有import引入的包，又会对其内部的import引用发起HTTP请求获取模块的内容文件。因此 Vite的主要功能就是通过劫持浏览器的这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器，Vite整个过程中没有对文件进行打包编译，所以其运行速度比原始的webpack开发编译速度快许多。
	缺点：缓慢的服务器启动，从入口文件去索引整个项目的文件，编译成一个或多个单独的js文件，再给浏览器	Vite改进：将应用中的模块区分为依赖和源码两类，从而缩短了开发服务器启动的时间。
	缺点：使用nodeJS去实现	Vite改进：Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 Node.js 编写的打包器预构建依赖快 10-100 倍。
	缺点：热更新效率低下，编译文件后将重新构建文件本身，显然我们不应该重新构建整个包，因为这样更新速度会随着应用体积的增长而直线下降	Vite改进：HMR是在ESM上执行的。当编辑一个文件的时候，Vite只需要精确地使用编辑的模块与其最近的HMR边界之间的链无效，使HMR更新始终快速，无论应用大小。Vite同时利用HTTP头来加速整个页面的重新加载

六、Vite缺点

1、生态不如webpack，webpack的loader和plugin非常的丰富；
2、prod环境的构建，目前用的Rollup，原因在于esbuild对于css和代码分割不是很友好；
3、还没有被大规模的使用，也不知道到时候还会有啥问题。

七、支持

Vite支持CSS；
Vite对less文件的支持；
Vite对PostCSS的支持；
Vite对TypeScript的支持，只编译，不检查语法，创建的时候选择Vue.ts;
Vite对Vue的支持，借助vite-plugin-vue2插件；
Vite支持Vue3的JSX；
Vite默认就是Vue3；

相关资料
官网：https://vitejs.dev/
https://zhuanlan.zhihu.com/p/442724012
https://lequ7.com/guan-yu-qian-duan-vite-wei-shen-me-kuai-ne-kuai-zai-na-shuo-yi-xia-wo-zi-ji-de-li-jie-ba.html
https://www.51cto.com/article/699993.html