一：原理上：

1：webpack将所有文件文件打包成一个或多个文件，先识别入口文件，逐级递归识别依赖，构建依赖图谱->转化AST语法树->处理代码->转换为游览器可识别的代码，再启动服务器。（先打包，后启动）

2：vite启动服务器后，基于游览器原生ES Module，利用浏览览器解析import，按需加载模块，进行编译，按需动态编译极大的缩减了时间。（无打包、按需编译）

3：Vite使用Go语言编写的Esbuild 对第三方依赖(node_modules)进行预构建，将其转换为ESM格式并缓存，极大地提升了首次启动速度，无论浏览器是否支持，都强制将 ES Module 转换为 CommonJS 或 AMD 格式，再打包成浏览器可执行的 bundle。

二：底层上：

1：webpack基于node实现。

2：vite基于Esbuild 预构建依赖。基于go语言

三：HMR上:

1：webpack需要重新将该模块的所有依赖重新编译。以模块为单位。

2：vite直接重新请求需要改变的模块。以单文件为单位。

四：vite相比较webpack来说

1：生态不及webpack、加载器、插件不够丰富

2：生产环境esbuild构建对于css和代码分割不够友好

3：项目开发游览要支持ES Module，不能识别CommonJS语法