尤雨溪官宣: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
相关推荐
lovingsoft5 分钟前
Chrome Lighthouse 详解
前端·chrome
Qlly15 分钟前
全栈工程师怎么接需求?从一句「加个功能」聊到能开发、能验收
前端·后端
马可家的菠萝19 分钟前
你的微信“文件传输助手”,是不是已经成了第二个网盘?
前端·后端·架构
略略略啦20 分钟前
Vibe Coding 基于Spec DD和TDD的实践指南
前端
shmily麻瓜小菜鸡41 分钟前
前端实现图片与PDF文字识别敏感信息打码方案
前端·pdf·状态模式
打工仔折腾 AI1 小时前
LangChain 工具调用实战:从 Tool 定义到 Agent 执行链路拆解
java·前端·人工智能·后端·python·langchain·ai agent 实战
汉堡大王95271 小时前
单次输出拉到100万Token:拆完 Gemini 4 Argon 的续写协议,才看懂谷歌这7个月在憋什么
前端·人工智能·后端
看浪的路人1 小时前
第9讲:大模型应用监控与可观测性——OpenTelemetry + Prometheus + Grafana 全链路追踪
java·前端·spring
内存过载1 小时前
用表格模拟甘特图:项目排期的土办法
前端·低代码
葡萄城技术团队1 小时前
用 SpreadJS 数据验证实现省市区三级联动
前端