1、开发环境区别

webpack 在开发时，需要自己开启 webpack-dev-server,而 webpack-dev-server 会使用 babel-loader 基于内存打包，比 Vite 慢很多

• 假设 mian.js 引入 Vue
• 该 server 会把 vue.js 的代码打包进 main.js

Vite 自己实现 server，不对代码打包，充分利用浏览器对<script type=module> 的支持

• 假设 main.js 引入了 Vue
• 该 server 会把 import { createApp } from 'vue' 改为 import { createApp } from "/node_modules/.vite/vue.js" ，这样浏览器就知道去哪找 vue.js 了
• 这样子可以节省时间

2、生产环境区别

• Vite 使用 rollup + esbuild 来打包 JS 代码
• Webpack 使用 babel 来打包 JS 代码，比 esbuild 慢很多，当然Webpack 也能使用 esbuild 打包，但是需要自己配置（很麻烦）。

因为 esbuild 是基于 go 语言写的，性能会比较好，然而 babel 是基于 JS 写的，性能比较差，所以 Vite 打包会比 Webpack 快很多

3、文件处理时机

• Vite 只会在你请求某个文件的时候处理该文件
• Webpack 会提前打包好 main.js,等你请求的时候直接输出打包好的 JS

4、Vite 缺点

• 热更新经常失效，但是可以刷新网页解决
• 有些功能 rollup 不支持，需要自己写 rollup 插件
• 不支持非现代浏览器（如IE6）