尤雨溪官宣:Vite 历史性的一刻!超越 Webpack!

见证了 Vite 历史性的一刻!Vite 下载量首次超越 Webpack

2025 年 7 月 30 日尤雨溪 推特晒出截图:Vite 周下载量首次超越 Webpack!

目前来看不管是下载量还是 star 数量均已经领先 webpack:

从追赶者到领跑者:Vite 的五年逆袭

2019 年,Vite 0.x 的 README 只有一句话:Make the web faster

2025 年,它真的做到了:

  • 开发服务器 131 ms 启动,比 Webpack 快 14
  • 热更新 31 ms,肉眼无感
  • 生产构建 521 ms,Webpack 需要 2942 ms

Webpack 用十年铺平"一切皆模块"的路,Vite 用五年跑完,还顺手把路拓宽了。

性能碾压:数据不会说谎

指标 Vite 5.x Webpack 5.x 领先
冷启动 131 ms 1 886 ms 14.4×
热更新 31 ms 420 ms 13.5×
构建 521 ms 2 942 ms 5.6×
内存峰值 42 MB 243 MB 5.8×
安装体积 19 MB 117 MB 6.2×

数据来源:npm-compare.com,2025-07-30 采样 1000 个开源仓库平均值。

开发者体验:从"配置工程师"到"零配置"

Webpackwebpack.config.js 动辄上千行,loaderpluginbrowserslist 轮番劝退。

Vite 把常见需求全部收进默认行为:

ts 复制代码
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: { open: true }
})

十行代码,覆盖九成业务:代码分割Tree-Shaking压缩预加载开箱即用

生态之战:Rollup 联盟 VS Webpack 帝国

Webpack 的护城河是 1.2 万个插件和 loader

Vite 的策略干脆利落:

  • 直接复用 Rollup 生态,90 % 插件零改动迁移
  • 官方维护核心插件:reactvuesveltelegacy
  • 社区两年新增 4800 个专属插件,年复合增长 401 %

性能差距指数级放大,生态差距指数级缩小。

Vite 换芯 Rolldown(已官宣,未正式发布)

就在上个月,尤雨溪发文:Vite 将用 Rust 编写的 Rolldown 取代现有的 esbuild + Rollup 双内核。

一句话总结:

  • 预打包 + 生产打包统一成一套工具,告别"环境不一致"
  • Rust 级性能:冷启动再快 30 %,内存再降 20 %
  • 向下兼容 Rollup 插件,老项目无痛迁移

目前处于公测阶段,Vue 3.6 将率先捆绑 Rolldown,正式版预计 Q4 发布。

Vite Devtools 统一工具链(研发中)

尤雨溪联合 antfu 宣布:打造框架无关的 Vite Devtools

核心功能预览:

  • 插件流水线可视化------一眼看出哪个插件拖慢构建
  • 包体积分析------Tree-shaking 漏网之鱼无处藏身
  • 远程调试------手机扫码,秒进同一开发环境

目前仍在内测,计划随 Rolldown-vite 正式版一起上线。

Webpack 会死吗?

不会。它会在这些角落继续发光:

  • 需要 IE11 的老银行系统
  • 需要模块联邦的微前端巨兽
  • 千万行遗留代码,牵一发动全身

但所有新项目脚手架已经把默认构建工具换成了 Vite:
create-react-app@6vue-cli@6Nuxt 4SvelteKit 2SolidStart 1.0 ------

默认选项,就是行业的投票器。

最后给大家推荐 3 个对比不同 npm 包的下载量网站:

  • npmchartshttps://www.npmcharts.com/compare/Vite,vite,webpack?interval=7&log=true
  • npmtrendshttps://npmtrends.com/vite-vs-webpack
  • npm-comparehttps://npm-compare.com/zh-CN/vite,webpack
相关推荐
李剑一2 分钟前
面试官:你是如何理解MVVM模型的?请你结合自己做过的项目从框架层面解释一下
前端·面试
Likeyou76 分钟前
HTML无尽射击小游戏包含源码,纯HTML+CSS+JS
javascript·css·html
tiantian_cool9 分钟前
Flutter-1
前端
Befool12 分钟前
elpis - 前端全栈框架
javascript
前端Hardy12 分钟前
这个你一定要知道,如何使用Pandoc创建HTML网页版文档?
前端·javascript·css
babii12 分钟前
将数组数据下载为 csv 文件,上传 csv 文件解析为数组
javascript
前端小嘎14 分钟前
常见前端面试题 之 AI打字机效果是如何实现的?
前端·javascript
前端老鹰14 分钟前
CSS scrollbar-width:轻松定制滚动条宽度的隐藏属性
前端·css
_前端小弟15 分钟前
记录一次主题色自动适应方案
前端