webpack的工作流程

webpack构建项目会根据资源模块的依赖关系构建依赖图，根据依赖图去加载/处理各种文件。

而当我们的项目越来越大的时候，需要处理的JavaScript代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于JavaScript开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。此时 webpack 构建项目时的构建速度与服务器的启动就会非常慢。

因为webpack为了支持多种模块化进行了统一的模块化处理。（webpack考虑的是兼容性的问题(浏览器端 + 服务端)

webpack 构建流程的示意图如下：

Vite 为什么比 webpack 快

首先我们要明白webpack应该是为了兼容性的考虑，所以webpack支持多种模块化，但是vite只是支持ESM规范，所以此时不需要去遍历依赖图文件了，进而问题就得到了解决

Vite 工作示意图如下：

webpack需要把所有的文件、依赖文件统统打包成Bundle之后，才会去启动Server，而vite一开始就启动Server，然后按需加载各种文件的。

所以基于这种特性，Vite 相较于 webpack 来说会更快

create-vite、vite、create-vue之间的区别

create-vite与create-vue本身都是创建了一个快捷工程化项目，我们称之为cli，create-vite能够提供React等框架的模板，create-vue只是针对于vue3所存在的一个cli，他们都是基于vite来创建服务器、打包的。

总结

vite能够跟webpack一样，能够实现资源模块的打包、加载，但是vite相比于webpack确实轻量了不少，他解决了webpack遍历依赖文件的问题，换句话说webpack考虑的是兼容性的问题(浏览器端 + 服务端)，而vite考虑的是浏览器端的资源文件加载。