webpack和vite区别

2019年我第一次在项目里用Vite，区别启动时间从webpack的区别28秒掉到1.2秒。当时以为是区别配置写错了，反复检查了三遍。区别

webpack的区别工作方式像搬家前把每个箱子都拆开、分类、区别重新打包，区别最后再装车。区别Vite的区别做法是：先装车，到了新家再拆箱。区别这个比喻不够精确，区别但能说明核心差异——webpack先打包再启动dev server，区别Vite先启动dev server，区别浏览器请求哪个模块就编译哪个。区别

Bundle vs No-Bundle

webpack的区别dev server启动时，要把整个依赖图走一遍。项目越大，入口越多，启动越慢。热更新（HMR）也是同理，改一个文件，webpack需要重新构建受影响的chunk，然后通知浏览器替换。大项目里改一行CSS等三秒是常事。

Vite基于ESM（ES Modules）做dev server。浏览器原生支持import，Vite只需要拦截请求，按需编译。启动时几乎不做构建工作，改哪个文件就编译哪个文件。HMR走的是ESM的模块图，只更新改动的模块，速度跟项目规模基本无关。

但Vite的快有个前提：浏览器必须支持ESM。现代浏览器都支持，IE不在考虑范围内。

生产构建：Vite也在用Rollup

很多人以为Vite不用打包，其实生产环境它用的是Rollup。Vite dev阶段不打包，build阶段还是要把代码打包成浏览器能高效加载的bundle。Rollup的tree-shaking比webpack更激进，产物体积通常更小。

webpack 5的tree-shaking也不差，但配置复杂度高。sideEffects字段、usedExports、providedExports这些选项，配错了就shaking不干净。Rollup的默认行为更符合直觉。

生态与配置

webpack的生态是它最大的护城河。loader和plugin加起来上万个，你能想到的构建需求基本都有现成方案。CSS预处理、图片压缩、代码分割、PWA、微前端，webpack都有成熟插件。

Vite的插件生态基于Rollup接口，数量少一些，但增长很快。Vue、React、Svelte这些主流框架都有官方插件。麻烦的地方在于：dev阶段用ESM，build阶段用Rollup，有些插件在两种模式下行为不一致，调试起来头疼。

配置层面，webpack的webpack.config.js可以写得很复杂，也可以很简洁。但复杂项目里，配置文件上千行不罕见。Vite的vite.config.ts通常短得多，因为很多优化是内置的。比如CSS代码分割、动态导入预加载、依赖预构建，Vite默认就做了。

依赖预构建

Vite有个webpack没有的步骤：依赖预构建。node_modules里的包很多是CommonJS格式，浏览器不认识。Vite用esbuild把这些依赖转成ESM，缓存在node_modules/.vite目录。esbuild是Go写的，比webpack的JavaScript构建快10到100倍。

这个预构建只在依赖变化时执行。第二次启动直接读缓存，所以Vite的冷启动和热启动差距不大。

该选哪个

新项目直接用Vite。除非你有大量webpack-specific的配置或插件，迁移成本太高。老项目如果构建速度还能忍，不急着换。如果dev server启动要一分钟以上，HMR等五秒以上，值得试试Vite。

有个细节：Vite的dev server和build产物行为可能有差异。比如import.meta.glob在dev和build时返回的路径格式不同。上线前一定要用vite preview验证一遍。webpack在这方面的坑少一些，因为dev和build用的是同一套打包逻辑。

webpack不会消失。很多老项目还在用，很多企业级脚手架还依赖它。但新项目的默认选择，已经从webpack转向Vite了。这个趋势在2021年之后变得很明显。