一：原理上：

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

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

二：底层上：

1：webpack基于node实现。

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

三：HMR上:

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

2：vite直接重新请求需要改变的模块。

webpack图

vite图

vite相比较webpack来说：

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

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

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