Vite 与 Webpack 为什么快？

核心答案

Vite的快体现在开发环境，Webpack较慢源于全量打包，核心差异在构建原理：

1. Vite快的原因：开发环境基于浏览器原生ESM按需加载，无需全量打包；用ESBuild预构建第三方依赖并缓存；HMR仅推送修改模块，效率高；内置多文件支持，无需额外loader。

2. Webpack较慢的原因：开发环境需全量打包；Loader链式处理效率低；HMR需更新整个bundle并遍历依赖树。

3. 生产环境：Vite用Rollup打包，Webpack需配置多项优化，两者性能接近但Vite配置更简洁。

延伸追问

• 1. Vite的预构建是何时执行的？如何触发重新预构建？——首次启动或依赖变更时执行，删除node_modules/.vite缓存可触发重新预构建。

• 2. Vite开发环境为什么不支持CommonJS模块？——开发环境基于浏览器原生ESM，CommonJS模块需预构建转为ESM才能被识别。

• 3. Webpack如何优化构建速度？——启用缓存、用thread-loader多线程构建、通过exclude/include缩小打包范围。

• 4. Vite的局限性是什么？——开发环境依赖浏览器ESM支持（不兼容IE），复杂场景插件生态不如Webpack丰富。

• 5. ESBuild的优势是什么？——基于Go编写，编译/转译/压缩速度比JS工具快10-100倍，支持多格式文件处理。

（注：文档部分内容可能由 AI 生成）