vite就是一个脚手架，不仅仅可以搭建Vue3项目，还可以搭建React等其他单页应用。

谈谈对vite的理解，和webpack进行对比说明。

webpack原理

webpack根据一个入口文件，对该文件进行分析依赖图。然后进行打包，并启动一个开发服务器devServer。

webpack打包后的页面，访问页面后页面的js文件不是原来的js，而是打包后的js。
随着项目的增加，打包时间会越来越长，如果在项目中的某个地方改动了代码，webpack则会对相关的依赖重新打包。

vite原理

vite相比于webpack而言，没有打包的过程，而是直接启动了一个开发服务器devServer。

vite启动的项目，访问页面时，直接返回了原来的html。

在vite项目中，index.html中的script的type属性为module。该属性值仅在现代浏览器中支持。

  1. <script type="module" scr="/scr/index.js"></script>

在这个属性的支持下，访问页面时，会自动发送相应js模块文件的请求。以此类推，一直请求相关模块的文件。

  1. 请求一个模块到开发服务器
  2. 开发服务器进行编译
  3. 将编译的结果发送给页面

其中将css文件编译成一个字符串。
vue文件的编译是通过vue/complire-sfc转换为js文件。

  • 预编译，不论是vue-cli还是vite，在预编译时都会将template编译成render函数。

最后，vite为什么相比于webpack为什么这么快的原因就是。vite在启动时，只是单纯的启动了一个开发服务器，在需要什么模块时，在浏览器上请求开发服务器中相应的模块。它解决的是在开发时随着项目不断增大时，项目打包效率极低的问题。
但也会导致页面上请求过多，但是开发时，开发服务器在本地启动，所以请求的速度也是非常快。

小结

webpack在启动时，会先构建项目模块的依赖图，然后进行打包，最后启动开发服务器。这一过程的时间会随着项目的增大而增长。
相比于webpack，vite会直接启动开发服务器。当需要某个模块时，再对该模块进行实时编译。由于vite利用ES Module自动发送请求的特点，所以只能在现代浏览器（支持type=module的浏览器）上使用vite。
vite不需要打包，意味着不需要进行依赖分析、不需要编译，所以启动速度非常快。它相比于webpack的优势也主要体现在开发阶段。
在打包生产环境时，一种是安装一个webpack包，另一个是通过vite自带的rollup进行打包。
vite的项目中不能使用commonJs，因为vite的项目是将代码发送到浏览器中，但浏览器不支持commonJs，所以不能使用。