最近正在投入精力学习Vite，顺便做一下学习笔记，从Vite的基本功能开始，一路进阶到从 0 到 1 搭建一个项目，再到深入探究一些高级配置。记录下这整个学习的过程。（以后有新项目的时候就可以快速搭建一个了😄😄😄）
学习的动机:
之前做一些大型的中后台管理平台的时候，使用webpack构建的前端项目启动有的需要几分钟，更改了代码之后响应到页面的时间有时也会超过五六秒，但当时也没觉得啥，直到Vite推出后，被宣传的这些优点吸引到了，不过一直也没准备去好好了解一下，最近在一次摸鱼时，竟然发现Github上vite的star竟然比Webpack还多，这还得了，看来是时候认真学习一下了
首先在正式开始介绍Vite之前，先了解一些相关的知识点
什么是ESM（ES模块）
ESM是ECMAScript 2015正式推出的一种原生模块机制，使用import导入，export导出。在此之前社区也推出了一些常见的解决方案，比如在Node.js中使用的CommonJS，在浏览器使用的AMD、CMD、同时支持浏览器和Node.js的UMD。随着现代浏览器对原生ESM的支持越来越好，目前前端项目几乎都使用这一规范了。
区分ESBuild,RollUp,Webpack,Vite，Vue-CLI
首先上面的都属于前端构建工具，构建工具是将本地源文件按照一定的逻辑规范，编译打包成浏览器识别的文件的一种前端工具，比如对于.vue文件的处理，图片的压缩，css的合并，js新语法转成兼容性更好的旧语法等等，这些都是构建工具做的
区别：Vue-CLI是基于Webpack的上层封装，是Vue官方提供的一个脚手架，包含了一些最常用的Web开发配置，可以使开发者快速的投入业务的开发，无需花费过多的精力放在构建工具的配置上。Webpack是一个纯打包工具，因为社区活跃和扩展性较高，任何想实现的功能基本上都可以在社区找到现成的工具，所以大部分的前端项目都是用Webpack进行的构建，RollUp和ESBuild更具有针对性，更适合打包库，而不是整个项目的构建。
webpack、rollup、vite、esbuild优劣势详解
为什么选择使用Vite
之前大多数项目使用的是Webpack，那么和Webpack相比，优势在哪呢？
1. 比Webpack更快
Webpack的打包工具是用JS实现的，而Vite在开发环境用的是ESBuild，生产环境用的是RollUp，最快的要数ESBuild，因为他是用Go编写的前端打包工具，Go本身是编译型语言，在运行上天然就比Javascript解释型语言要快的多，这是官方对比图，在开发阶段我们修改了代码，效果几乎瞬间就会响应到浏览器上，大大减少了等待的时间和项目启动的时间
Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。
-
依赖 大多为在开发时不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者 CommonJS）。
Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
-
源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。
Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
2. 上手配置更简单
上文提到的Vue-CLI集成了很多通用的解决方案，可以大大减少开发者配置的时间，一个新项目，通过Vue-CLI可以快速创建，如果直接使用Webpack的话，需要配置很多开发配置，学习时间成本很高
Vite和webpack不同的是，它不但自身是个打包工具，同时也进行了集成，他就像是Webpack + Web 常用配置 + Webpack-dev-server,所以它和Webpack的定位是不同的，也可以当做新一代的Vue-CLI，只是底层打包的工具不再是Webpack了
目前在github上的starVite已经超过了Webpack
结论
vite是站在巨人的肩膀上，得益于优秀的工具ESBuild和RollUp ，并且利用了现代浏览器支持ESM的特性，实现了资源的按需加载。成为了新一代的web构建工具，能够显著提升前端开发体验
