前端开发领域一个历史性时刻的大事。
Vue 和 Vite 的作者尤雨溪,在社交媒体上发了一张图。他只配了简单的文字:“This just happened”(这刚发生)。

这张图是 npm 周下载量的对比图。
图中显示,蓝色线条代表的 Vite,其周下载量达到了 32,621,330 次。红色线条代表的 Webpack,周下载量是 32,147,362 次。
这是一个历史性的时刻。Vite 的周下载量,在历史上第一次正式超越了 Webpack。
这是最新的一个数据,无论 Github Star 还是 NPM 周下载量,Vite 都已超越 Webpack



Webpack 的时代
Webpack 是一个伟大的工具。它曾经是前端开发的王者。
在过去很多年里,Webpack 几乎是所有现代前端项目的标准配置。我们熟悉的大型项目,比如曾经的 Create React App (CRA),都深度依赖 Webpack。它建立了一个庞大的生态系统,解决了代码打包、模块化、兼容性等一系列复杂问题。
但是,Webpack 也有它的问题。
它的配置非常复杂。很多开发者为了配置 Webpack,需要花费大量时间学习。网上甚至有很多关于 “Webpack 配置工程师” 的段子。
它的开发体验也逐渐跟不上时代。随着项目变得越来越大,Webpack 的启动和热更新速度会变得非常慢。开发者修改一行代码,可能需要等待几十秒甚至更久才能看到效果。这种体验在今天看来,是难以忍受的。
Vite 为何能崛起?
Vite 的出现,解决了 Webpack 的核心痛点。
Vite 是一个现代化的前端构建工具。它的名字来源于法语,意思是 “快速的”,这也正是它的最大特点。
Vite 为什么这么快?因为它利用了现代浏览器原生支持的 ES 模块(ESM)功能。
在开发模式下,Vite 不需要像 Webpack 那样提前打包所有文件。相反,它会直接启动一个开发服务器。当浏览器请求某个模块时,Vite 会即时编译并提供这个模块。这种按需编译的方式,使得项目的启动速度极快,几乎是秒开。
在生产环境,Vite 使用了另一个优秀的工具 Rollup 进行打包。Rollup 打包出的代码体积更小,运行效率更高。
简单来说,Vite 给开发者带来了极致的开发体验。它的出现,让前端开发变得更加高效和愉快。
一个时代的更迭
Vite 超越 Webpack,不仅仅是两个工具的竞争。它更代表着一种开发思想的转变。
这个事件标志着,前端社区正在从“一切皆打包”的旧范式,转向“利用原生能力、追求极致体验”的新范式。
这也给所有开发者一个启示:技术是不断发展的。没有永远的王者,只有不断创新的工具。
当然,Webpack 依然是一个非常强大的工具。它拥有庞大的存量项目和成熟的生态。在很多复杂的场景下,Webpack 依然有它的用武之地。
但是,趋势已经非常明显。对于绝大多数新项目而言,Vite 已经成为了更好的选择。就连 React 的官方文档,现在也推荐使用 Vite 等工具来创建新项目。
未来会怎样?
Vite 的胜利,不代表构建工具的战争已经结束。
事实上,新一代的竞争者已经出现了。它们就是以 Rust 为代表的编译型语言编写的工具,比如 Vercel 推出的 Turbopack,以及字节跳动开源的 Rspack。
这些工具的速度更快,甚至比 Vite 还要快。它们的目标,是把前端开发的效率推向一个新的极限。
前端工具的世界永远在变化。这种变化对开发者来说是好事。因为每一次技术的革新,都意味着我们的开发体验会变得更好,工作效率会变得更高。
Vite 超越 Webpack,是一个值得纪念的里程碑。它宣告了一个新时代的到来。
那么,你现在正在使用什么构建工具呢?你对这次历史性的超越有什么看法?欢迎在评论区留言讨论。