尤雨溪官宣: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 个开源仓库平均值。

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

Webpack 的 webpack.config.js 动辄上千行,loader、plugin、browserslist 轮番劝退。

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 % 插件零改动迁移
  • 官方维护核心插件:react、vue、svelte、legacy
  • 社区两年新增 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@6、vue-cli@6、Nuxt 4、SvelteKit 2、SolidStart 1.0 ------

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

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

  • npmcharts :https://www.npmcharts.com/compare/Vite,vite,webpack?interval=7&log=true
  • npmtrends :https://npmtrends.com/vite-vs-webpack
  • npm-compare :https://npm-compare.com/zh-CN/vite,webpack
相关推荐
Dream-Y.ocean1 小时前
鸿蒙PC平台宅匠 3D 室内设计适配实战:基于 Electron 壳方案的 Three.js 双渲染引擎与参数化户型编辑器开发
javascript·3d·harmonyos
Csvn2 小时前
性能监控
前端
Highcharts.js2 小时前
Highcharts Gantt使用符号的自定义数据标签开发甘特图示例
javascript·甘特图·highcharts·图表开发·实战代码·响应式图表
Csvn2 小时前
构建工具
前端
FRing033 小时前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
kyriewen5 小时前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员
IT_陈寒5 小时前
当Java的hashCode遇上Lombok,我的缓存被全清了
前端·人工智能·后端
工控丫丫6 小时前
帆软看板中经常使用的公式函数及经常搭的组合
前端·javascript·数据库
jerrywus6 小时前
我用 GPT-6.1-sol 做了台会讲解的 3D 售货机:60 罐饮料,一口没喝上
前端·agent·claude
孟陬7 小时前
Foobar 技术周刊#159:当看不懂代码时,如何高效排障调试。脏页陷阱:一条只读查询,写入数 TB 数据。推测解码:大模型加速利器
前端·人工智能·后端