Table of Contents

2025-2026 国外前端流行框架全景

一份从 npm 下载量、GitHub stars、Stack Overflow 调研、招聘数据多维度交叉的”国外前端框架地图”。每个框架给”流行度 + 定位 + 趋势 + 适用场景”。含 React/Vue/Angular 第一梯队、Next.js/Nuxt/Astro 等 meta-frameworks、Tailwind/shadcn/ui CSS 革命、构建工具/测试/移动端等周边生态。结论：React + Next.js + shadcn/ui + Vite + Tailwind 是 2026 欧美新项目”默认套件”；Svelte/Qwik 是”性能派 + 开发者最爱”；Angular 仍是企业大项目的中流砥柱；Astro 是内容站/营销页/文档站的不二之选。

梯队总览
第一梯队：UI 框架（React / Vue / Angular / Svelte / Solid / Qwik）
第二梯队：Meta-frameworks（Next.js / Nuxt / SvelteKit / Astro 等）
第三梯队：跨端与移动（React Native / Expo / Flutter / Tauri / Electron）
第四梯队：CSS-first 革命（Tailwind / UnoCSS / Panda CSS / Vanilla Extract）
第五梯队：状态管理（Zustand / Jotai / Redux Toolkit / Pinia）
第六梯队：UI 组件库（Material UI / Chakra / Mantine / shadcn/ui / Element Plus）
第七梯队：构建工具（Vite / Webpack / esbuild / SWC / Turbopack / Rspack / Bun）
第八梯队：数据获取 / 缓存（TanStack Query / SWR）
第九梯队：测试（Vitest / Jest / Playwright / Cypress）
第十梯队：3D / 可视化（Three.js / Babylon.js / D3）
2025-2026 关键变化
理念分类：为什么这些框架长得不一样
按”使用场景”的选择决策树
新项目”默认套件”（2026 答案）
数据来源与方法

1. 梯队总览

怎么定义”流行”？没有单一指标能说清楚，我用四组数据交叉看：

指标	反映什么	局限性
npm 周下载量	实际安装使用量	重复装、CI 装、bot 都算
GitHub stars	关注度 + 社区活力	收藏党也点 star
Stack Overflow 调研（年度开发者调查）	开发者”使用 + 想用”	偏欧美英语区
招聘 JD 数量（LinkedIn / Indeed）	商业需求	反映当下，不是趋势

2025-2026 综合排名（欧美为主）：

1. React           —— UI 库事实标准
2. Next.js         —— React 全栈框架事实标准
3. Vue / Nuxt      —— 渐进式 / 亚洲更强
4. TypeScript      —— （已不是"框架"，但默认必备）
5. Tailwind CSS    —— utility-first CSS 事实标准
6. Angular         —— 企业中坚
7. Svelte / SvelteKit  —— 性能派最爱
8. Vite            —— 构建工具事实标准
9. Astro           —— 内容站首选
10. shadcn/ui      —— 组件新范式（不是 npm 包）

下面逐梯队详细拆解。

2. 第一梯队：UI 框架

UI 框架 = 只负责”视图层”的库（区别于含路由/数据获取/SSR 的 meta-framework）。

框架	npm 周下载	GitHub stars	定位	趋势
React	~5,000 万	~233k	UI 库（不是完整框架）	稳坐 #1，2024 起 Server Components 推
Vue	~480 万	~208k	渐进式框架	稳，3.x 生态成熟
Angular	~280 万	~97k	完整企业框架（Google）	略降但企业还在用
Svelte	~70 万	~82k	编译时框架	涨，Svelte 5 runes 是突破
Solid	~25 万	~33k	细粒度响应式	小众但快（性能 #1）
Qwik	~7 万	~22k	Resumable（不 hydrate）	新锐，缓慢涨

2.1 React（Meta/Facebook）

位置：UI 库，不是完整框架。Meta 维护，全球最大生态。

核心特征：
– JSX 语法：JS 里写 HTML-like 表达式
– Virtual DOM：diff 算法高效更新
– Hooks 范式（16.8+）：useState / useEffect 等函数式 API
– Server Components（RSC）：2024 起的革命性特性，组件可跑在服务端
– 跨端：React Native（移动）、React Three Fiber（3D）、React PDF

2025-2026 状态：
– 生态无敌：组件库、工具链、文档、StackOverflow 答案都是最多
– 争议：RSC 推动”全栈 React 化”，但学习曲线陡（client/server 边界模糊）
– 替代品压力：Svelte 5、Qwik 都在”性能 + DX”上挑战，但生态规模差距太大

适用：几乎所有场景（除了”团队就要 Vue”那种强约束）

2.2 Vue（Evan You）

位置：渐进式框架（从库到完整方案可伸缩）。Evan You（尤雨溪）独立维护。

核心特征：
– 单文件组件（SFC）：.vue 文件包含 template/script/style
– Composition API（3.0+）：类似 React Hooks 的函数式 API
– 响应式系统：ref / reactive / computed
– 学习曲线比 React 缓：模板语法对设计师友好

2025-2026 状态：
– Vue 3.5+：性能大幅提升，响应式系统重写
– 中国/亚洲市场份额 > 欧美（国内用 Vue 习惯，Element Plus 生态很成熟）
– 欧美仍稳：Vue 3 + Nuxt 3 是 Vue 圈首选组合

适用：内容站、SaaS 后台、移动 Web、对中文开发者更友好

2.3 Angular（Google）

位置：完整企业框架（含路由、表单、HTTP、依赖注入、测试、CLI 一站式）。

核心特征：
– TypeScript 原生（强类型）
– DI（依赖注入）是核心设计模式
– 装饰器：@Component @Injectable 等
– RxJS：反应式编程标配
– 学习曲线最陡

2025-2026 状态：
– 企业仍是主战场：银行/政府/医疗/大型 SaaS（大项目/长生命周期需要这种”框架级”约束）
– 新项目不选：创业公司、SaaS 初创几乎不选 Angular
– Angular 17+：standalone components、Signals（响应式）、新的控制流语法

适用：大企业后台、长期维护（5-10 年）的大型应用、政府项目

2.4 Svelte（Rich Harris）

位置：编译时框架——不打包运行时，编译成原生 JS。

核心特征：
– 零运行时：bundle size 极小（比 React/Vue 小 50%+）
– .svelte 文件：类 Vue SFC 但更简洁
– Svelte 5 runes（2024）：$state / $derived / $effect —— 真正的细粒度响应式
– 性能接近 Solid：DOM 直接更新，无 Virtual DOM

2025-2026 状态：
– Svelte 5（2024-10） = 重大突破。runes 范式让 Svelte 重新有了”杀手特性”
– SvelteKit：完整全栈方案（路由、SSR、数据获取）
– 开发者喜爱度第一：State of JS 多年 #1
– 企业采用慢：仍是个人/小团队/性能敏感项目首选

适用：性能敏感应用、SPA、希望最小 JS bundle 的项目

2.5 Solid（Ryan Carniato）

位置：跟 Svelte 类似的”无 VDOM 细粒度响应式”，但 API 更接近 React。

核心特征：
– JSX + 函数组件，API 跟 React 几乎一样（学习成本低）
– 真·细粒度响应式：只有用到的 DOM 节点更新
– 性能 #1：benchmark 跑分全场景领先
– SolidStart：全栈框架

2025-2026 状态：
– 极小众：~25k 周下载，~33k stars
– 极受推崇：用过的人都说好
– 企业几乎不用：招聘需求很少

适用：性能极致敏感（动画、可视化、嵌入式 Web）

2.6 Qwik（Builder.io）

位置：Resumable 框架——服务端序列化状态，客户端不 hydrate，只在需要时加载 JS。

核心特征：
– “0 hydration”：首屏不下载/不执行任何 JS
– $ 符号：所有事件 handler 以 $ 结尾，编译器在需要时懒加载对应代码
– Resumability：客户端从 SSR 序列化点继续执行，不重做

2025-2026 状态：
– 理念先进：理论上首屏性能无敌
– 生态小：~7k 周下载
– 企业试水多，落地少

适用：内容站、营销页、TTI（Time to Interactive）最敏感的项目

3. 第二梯队：Meta-frameworks

Meta-framework = 在第一梯队 UI 框架之上加了路由、SSR、数据获取、构建、部署一体化的框架。

框架	基础	定位	流行度（npm 周下载）
Next.js (Vercel)	React	React 生态”官方”全栈框架	绝对第一，~600 万
Nuxt	Vue	Vue 生态”官方”全栈框架	Vue 圈首选，~150 万
SvelteKit	Svelte	Svelte 全栈	涨，跟 Svelte 同步
Remix（现 React Router 7）	React	路由优先的 web 标准派	降（被 Next.js 压）
SolidStart	Solid	Solid 全栈	极小众
Astro	多框架支持	内容站 / 静态优先	大涨，~50 万
TanStack Start (前身 tRPC Start)	React / TS	全栈 TS，路由/数据	2025 新，涨

3.1 Next.js（Vercel）

位置：React 圈”默认”全栈框架。Vercel 公司维护。

核心特征：
– App Router（13+）：基于 React Server Components 的新路由系统
– Pages Router（旧）：传统的 pages/ 目录
– Server Components / Server Actions（2024+）：服务端组件 + 服务端 action（表单处理等）
– 内置优化：图片、字体、Script、Edge runtime
– Vercel 一键部署：零配置上线

2025-2026 状态：
– React 生态”标准答案”：新 React 项目首选
– 学习曲线陡：RSC、client/server boundary、streaming 概念复杂
– Vercel 锁定争议：能跑别处但 Vercel 上部署最舒服
– Next 15+（2025）：更稳定的 RSC、更快的 Turbopack

适用：几乎所有 React 全栈场景

3.2 Nuxt（Vue 生态）

位置：Vue 3 圈”默认”全栈框架。

核心特征：
– 约定式路由（pages/ 目录）
– Nuxt 3+（2023 GA）：基于 Vue 3 + Vite + Nitro（跨端 server engine）
– Server Engine（Nitro）：可部署 Node / Bun / Deno / Workers
– 内置：SSR/SSG、数据获取、SEO、模块系统

2025-2026 状态：
– Vue 圈默认答案
– 生态略弱于 Next.js：但差距在缩小
– 国内使用率高于欧美：阿里、字节、腾讯内部都有大量 Nuxt 项目

适用：Vue 全栈项目

3.3 SvelteKit

位置：Svelte 圈”官方”全栈方案。

核心特征：
– 基于 Svelte 5 runes（2024+）
– 文件路由 + load 函数（约定式数据获取）
– adapter 概念：可适配 Vercel / Netlify / Cloudflare / Node / 静态
– 表单 action：服务端 action 模式

2025-2026 状态：
– 小而美：性能 + DX 平衡
– 生态小：但 Svelte 5 之后明显加速

3.4 Astro

位置：“内容站/营销页”领域的事实标准。支持任何 UI 框架（React / Vue / Svelte / Solid 都能用）。

核心特征：
– Islands Architecture：默认零 JS 输出，只有标了 client:* 的组件才发 JS
– Content Collections（2024+）：类型安全的内容/MDX 管理
– 多框架混合：一个项目里 React + Vue + Svelte 共存
– Astro 5+（2024-12）：Server Islands（按需 SSR 单个组件）

2025-2026 状态：
– 内容站首选：博客、文档站、营销页、Landing page
– 与 Next.js 互补：Astro 做静态/内容，Next.js 做重交互应用
– 社区猛涨：npm 周下载 ~50 万，增速第一

适用：博客、文档站、营销页、官网、电商详情页

3.5 Remix → React Router 7

位置：web 标准派（依赖浏览器原生 form/loader 模式）。

2024 关键变化：Remix 团队加入 React Router，Remix v3 改名为 React Router v7（2024-12）。Remix 精神保留为 RR7 的 framework mode。

核心特征：
– loaders / actions：基于浏览器原生 form
– 嵌套路由
– 数据并行的 SSR

2025-2026 状态：
– 被 Next.js 压：理念好但生态/招聘不如
– RR7 转型：通过 React Router 名义延续生命

3.6 TanStack Start（新）

位置：TanStack Query 团队 2025 年 GA 的全栈框架。

核心特征：
– type-safe 全栈：端到端 TypeScript
– 基于 TanStack Router（极强类型路由）
– 服务端函数：RPC 模式

2025-2026 状态：
– 新项目，增速快
– 小众但被看好（TanStack Query 团队信誉 + 创新性）

4. 第三梯队：跨端与移动

框架	出品方	备注	流行度
React Native + Expo	Meta / 6502	跨端 #1	~50 万 npm 周下载（Expo）
Flutter	Google	Dart 语言	~16 万
Ionic + Capacitor	Ionic 团队	Web 技术栈	略降
NativeScript	nStudio	老牌	极小众
Kotlin Multiplatform Mobile (KMM)	JetBrains	跟 Compose Multiplatform 合并	涨
SwiftUI	Apple	iOS 专属	必用
Jetpack Compose	Google	Android 专属	必用
Tauri	Tauri 团队 (Rust)	桌面应用，Electron 替代	~15 万
Electron	GitHub (原 Atom)	桌面应用	仍 #1，~1100 万
Neutralino.js	Neutralinojs	轻量桌面	极小众

4.1 React Native + Expo

位置：跨 iOS + Android 移动开发的事实标准。用 React 写原生 UI。

Expo（2016-，独立公司 6502）= RN 的”现代发行版”：
– Expo CLI 一键初始化
– EAS Build（云端构建 iOS/Android，开发者无需 Mac）
– Expo Router（基于文件的路由）
– Expo SDK 50+（Camera/Location/Notifications 一行集成）

2025-2026 状态：
– 事实标准：跨端创业公司首选
– 新架构（Fabric/TurboModules） 2024 稳定：性能大幅提升
– 与 Web 边界模糊：Expo Router 支持 universal app

4.2 Flutter

位置：Google 自绘 UI 框架，跨移动 / Web / 桌面 / 嵌入式。

核心特征：
– Dart 语言
– 自绘 Skia 引擎：跟 OS 控件脱钩，UI 完全一致
– Impeller 渲染器（2023+）：iOS 性能大幅提升
– Hot Reload

2025-2026 状态：
– 企业采用增加：BMW、阿里、字节部分项目
– 学习曲线：Dart + 自绘思路需要适应
– Web/桌面：能用但不如 RN 顺

适用：自定义 UI 强、跨端一致、3D 动画

4.3 Tauri

位置：Electron 替代品。Rust 写核心 + 系统 WebView（WKWebView / WebView2 / WebKitGTK）做 UI。

核心特征：
– bundle size 1/10 Electron（几 MB vs 几十 MB）
– 内存占用 1/3
– Rust 写后端（IPC 极快、类型安全）
– Tauri 2.0（2024）：跨移动（iOS + Android）+ 桌面

2025-2026 状态：
– 抢 Electron 份额：VSCode 之外的小型桌面应用首选
– Rust 学习曲线：拦了一些 JS 开发者

适用：需要轻量 + 跨桌面 + 移动的应用

4.4 Electron

位置：老牌桌面框架。Node.js + Chromium 打包。

核心特征：
– 生态最全：VSCode、Slack、Discord、Figma、Notion 都在用
– bundle 大：基础 100MB+
– 内存重：每个 Electron 应用带一个 Chromium 进程

2025-2026 状态：
– 仍是 #1：Web 开发者跨桌面的最简单路径
– 被 Tauri 抢小应用市场

5. 第四梯队：CSS-first 革命

核心问题：怎么写样式。10 年前是 CSS 文件、然后 SCSS/Less、然后 CSS-in-JS、现在 utility-first 赢了。

框架	定位	流行度
Tailwind CSS	Utility-first CSS（已统治）	~600 万周下载（v4）
UnoCSS	Tailwind 替代品，按需生成，极快	~10 万
Panda CSS	Chakra 团队，零运行时 CSS-in-JS	涨
Vanilla Extract	TS 写 CSS，零运行时	~5 万
StyleX (Meta)	Facebook/Instagram 内部用的 CSS-in-JS	小众
Pinceau	Nuxt 生态的 CSS 框架	极小
Stitches	已停止维护	退场
Emotion	CSS-in-JS 老牌	略降
styled-components	CSS-in-JS 老牌	略降
Panda CSS	见上	涨
Open Props	CSS 变量集	涨
Linaria	零运行时 CSS-in-JS	极小

5.1 Tailwind CSS（Adam Wathan）

位置：utility-first CSS 框架的代名词。”HTML 里写 class，不用写 CSS”。

核心特征：
– 原子 class：flex items-center px-4 py-2 bg-blue-500 text-white rounded
– 设计系统内置：颜色、间距、字号都是规范值
– JIT 模式（v3+）：按需生成 CSS，bundle 极小
– Tailwind 4（2024-12）：CSS-first 配置（不再用 tailwind.config.js），Lightning CSS 引擎

2025-2026 状态：
– 统治：React/Vue/Svelte/Astro/任何 UI 框架都会用
– 争议：HTML 看起来”乱”（vs 传统 CSS 分离）
– 不可逆：新项目默认选 Tailwind

适用：几乎所有项目（除了纯 CSS 极简 demo）

5.2 UnoCSS（Anthony Fu）

位置：Tailwind 的”按需 + 更快 + 更灵活”版本。

核心特征：
– 极速：比 Tailwind JIT 还快
– 可自定义 preset：可以定义自己的 utility
– 多模式：Tailwind 兼容 / Wind 简写 / 自定义

2025-2026 状态：
– 小但精：Anthony Fu（Vue 团队、Vitest 作者）出品
– 是 Nuxt / Vite 用户的隐藏选项

5.3 旧时代的退场

CSS-in-JS 整体在退潮（Tailwind 抢了太多）：
– styled-components、Emotion 仍在用但新项目少选
– Stitches 已停止维护
– StyleX 仍 Meta 内部用

为什么 Tailwind 赢了：
1. 跟 RSC / SSR 兼容好（CSS-in-JS 跟 SSR 一直有问题）
2. bundle 体积小
3. 设计系统一致
4. 不需要想 className 命名

6. 第五梯队：状态管理

库	框架	备注	周下载
Redux Toolkit	React	仍是企业级标配	~600 万
Zustand	React	已超 Redux，~700 万	~700 万
Jotai	React	原子化，跟 Zustand 抢	~200 万
Pinia	Vue	Vue 3 官方推荐	~150 万
Nanostores	多框架	极小（< 1KB）	~10 万
TanStack Query	多框架	数据获取/缓存	~1000 万
SWR	React	Vercel 维护，跟 TanStack 抢	~400 万
MobX	React/Vue/Angular	反应式 OOP 风格	~150 万
XState	多框架	状态机	~30 万
Valtio	React	代理式状态	~80 万
Recoil (Meta)	React	已停止维护	退场
Apollo Client	GraphQL	跨框架	~200 万
urql	GraphQL	跨框架	~50 万

6.1 Zustand（Poimandres）

位置：React 状态管理的新王者，超过 Redux。

核心特征：
– 极简 API：create((set) => ({...}))
– 无 boilerplate：跟 Redux Toolkit 的 slices / reducers 形成对比
– 不绑定 React：底层是 vanilla store
– TypeScript 友好

2025-2026 状态：
– 新项目默认：Zustand 几乎成了 React 状态管理的”中性选择”
– Redux 仍占企业：但新项目首选 Zustand

6.2 Pinia（Vue）

位置：Vue 3 官方推荐状态管理（取代 Vuex）。

核心特征：
– 类似 Composition API 的 defineStore 写法
– TypeScript 完美支持
– 支持 devtools

6.3 TanStack Query（Tanner Linsley）

位置：数据获取/缓存的”事实标准”。其实不算是”状态管理”，是”服务器状态管理”。

核心特征：
– 缓存 + 重新请求 + 乐观更新 自动化
– 跨框架：React / Vue / Svelte / Solid / Angular 都有 adapter
– DevTools 极强

2025-2026 状态：
– 统治：~1000 万周下载，几乎是任何带数据获取的项目必装
– 跟 Zustand / Redux 互补：本地状态用 Zustand，服务器状态用 TanStack Query

6.4 状态管理的”分层”思想（2025 主流）

┌──────────────────────────────────────┐
│         UI 组件局部状态               │  ← useState / ref
├──────────────────────────────────────┤
│         全局 UI 状态                  │  ← Zustand / Pinia
│    (主题/侧边栏/用户偏好)              │
├──────────────────────────────────────┤
│         服务器状态                    │  ← TanStack Query / SWR
│    (用户列表/订单数据/API 数据)        │
├──────────────────────────────────────┤
│         URL 状态                     │  ← nuqs / useSearchParams
│    (查询参数/路由)                     │
├──────────────────────────────────────┤
│         表单状态                      │  ← React Hook Form / Zod
└──────────────────────────────────────┘

新项目不再追求”一个 store 管所有”——分层管，每层用对的工具。

7. 第六梯队：UI 组件库

UI 组件库 = 提供 Button/Table/Form/Modal 等成品组件。

库	框架	备注	周下载
Material UI (MUI)	React	Google Material Design	~400 万
Chakra UI	React	简洁，最爱	~100 万
Mantine	React	涨，社区最爱	~50 万
Ant Design (antd)	React	中国公司出海首选	~80 万
Radix UI	React	无样式 headless	~50 万
shadcn/ui	React	不是包，是复制粘贴代码	N/A
Element Plus	Vue 3	中国国内主流	~22 万
Vuetify	Vue	Material Design	~50 万
Naive UI	Vue 3	涨，TS 友好	~5 万
PrimeVue	Vue	企业级	~10 万
Quasar	Vue	跨端能力强	~10 万
Angular Material	Angular	官方	~30 万
PrimeNG	Angular	企业首选	~15 万
Ionic	Angular/React/Vue	移动端 UI	~10 万
HeroUI (NextUI)	React	涨	~5 万
Park UI	多框架	Ark UI 基础	极小
Bootstrap	多框架	老牌	~300 万
Bulma	多框架	CSS-only	~3 万
Flowbite	多框架	Tailwind 组件	~10 万
DaisyUI	多框架	Tailwind 组件	~20 万

7.1 shadcn/ui（一个范式革命）

位置：2024-2026 年最热的”组件库”——但它不是 npm 包。

核心特征：
– 不是安装：npx shadcn@latest add button 把代码复制到你的项目里
– 基于 Radix UI（无样式 headless）+ Tailwind CSS
– 完全可定制：你拥有代码所有权，想怎么改怎么改
– CLI 添加：每个组件单独 add，不想要的不会进 bundle

2025-2026 状态：
– 事实上的 React 组件新标准
– 生态爆炸：shadcn 衍生了大量主题（shadcn-nuxt、shadcn-svelte 等）
– 开源界最被 fork 的项目之一

适用：所有 React + Tailwind 项目

7.2 MUI (Material UI)

位置：React 圈最成熟的”成品组件库”。

核心特征：
– 完整 Google Material Design 实现
– MUI X：高级表格、日期选择器、Charts
– TypeScript 优秀

2025-2026 状态：
– 企业首选：需要”全功能 + 不重设计”的项目常用
– 样式绑定：组件长得很”Google”，要换风格需要 sx prop / theme

7.3 Ant Design

位置：中国/亚洲企业的默认选择。阿里出品。

核心特征：
– 完整后台组件：Table / Form / Tree / Cascader 等
– 国际化做得最好：内置 50+ 语言
– 企业级质量

2025-2026 状态：
– 国内企业默认
– antd v5（2022+）：CSS-in-JS（cssinjs）+ React 18 兼容
– 出海项目也用（对欧美开发者不友好的是”长得像国内后台”）

7.4 Element Plus

位置：中国国内 Vue 圈默认。饿了么团队维护。

2025-2026 状态：
– 国内 Vue 后台标配
– Element UI（Vue 2 老版）已停更，Element Plus（Vue 3 版）持续维护

7.5 Naive UI（TypeScript 友好的 Vue 组件库）

位置：Vue 3 时代崛起的”轻量 + TS 友好”组件库。

核心特征：
– TypeScript 写出，所有组件有完整类型
– 主题可定制
– tree-shakable

2025-2026 状态：
– Vue 圈新项目越来越选 Naive UI 而不是 Element Plus
– 国内国外都有采用

8. 第七梯队：构建工具

构建工具 = 把 TS/JSX/CSS/图片变成浏览器能跑的 bundle。

工具	角色	周下载	速度
Vite (Evan You)	前端 dev server + build	#1，~900 万	极快（基于 esbuild）
Webpack	老牌打包器	~3500 万	慢
esbuild	Go 写的 TS/JS 编译器	~3000 万（间接）	极快
SWC	Rust 写的 TS/JS 编译器	~500 万	极快
Turbopack (Vercel)	Webpack 替代	~5 万	极快
Rspack (字节)	Webpack 兼容 + Rust 速度	~30 万	极快
Farm	Rust 写的新构建器	极小	极快
Bun Bundler	Bun 自带	涨	极快
Rollup	库打包首选	~1500 万	快
Parcel	零配置打包	略降	中
tsc	TS 官方编译器	~5000 万	慢但必要
Lightning CSS	极快 CSS 解析/压缩	涨	极快
Biome	Rome 团队的 linter+formatter	涨	极快（Rust）
oxc	Rust 写的 JS 工具链	涨	极快

8.1 Vite（Evan You）

位置：2025-2026 dev server 事实标准。

核心特征：
– 基于 ESM 的 dev server：冷启动 < 1s（vs Webpack 30s+）
– 生产构建基于 Rollup
– HMR 极快
– 插件生态丰富：覆盖 Vue/React/Svelte/任何框架

2025-2026 状态：
– 新项目默认：~900 万周下载
– Rollup 4+（Vite 6/7）：构建速度进一步提升
– Vite 6+（2024-12）：SSR + 静态站点支持大幅增强

8.2 Webpack 5

位置：老牌构建工具，仍有海量存量项目。

2025-2026 状态：
– 新项目不选 Vite 就选 Turbopack/Rspack
– 存量维护：无数大项目仍在 Webpack 5
– Webpack 5 持续更新：模块联邦、asset modules、persistent caching

8.3 SWC（Rust 写的 TS/JS 编译器）

位置：Next.js 内部用，跟 esbuild 抢”fast transpiler”。

核心特征：
– 比 esbuild 还快（Rust vs Go）
– Babel 的 drop-in 替代
– TypeScript / JSX / 现代语法全支持

8.4 Rspack（字节跳动 / ByteDance）

位置：Webpack 兼容 API + Rust 速度。

核心特征：
– 跟 Webpack 配置基本一致（migrate 几乎零成本）
– 比 Webpack 快 5-10x
– Modern.js / Rsbuild（字节的元框架）底层

2025-2026 状态：
– 大厂迁移首选：字节、京东部分项目从 Webpack 迁 Rspack
– Rsbuild：基于 Rspack 的更高层抽象，类似 Vite

8.5 Turbopack（Vercel）

位置：Next.js 默认构建器（2024+ GA stable）。

核心特征：
– Vercel 团队（Webpack 作者 Tobias Koppers）开发
– 基于 SWC
– Webpack 兼容

8.6 Bun Bundler

位置：Bun 自带的构建工具。

2025-2026 状态：
– Vite 替代品之一（API 略不同但目标一致）
– 跟 Bun runtime 配合最佳

8.7 Biome（前 Rome）

位置：linter + formatter 替代 ESLint + Prettier，Rust 写，极快。

2025-2026 状态：
– 新项目默认：替代 ESLint + Prettier
– Rspack 团队也参与

9. 第八梯队：数据获取 / 缓存

核心问题：从后端 API 拿数据，处理 loading / error / 缓存 / 重新请求。

库	周下载	备注
TanStack Query	~1000 万	跨框架，事实标准
SWR (Vercel)	~400 万	React 圈
Apollo Client	~200 万	GraphQL 首选
urql	~50 万	GraphQL 轻量
RTK Query (Redux Toolkit)	~100 万	跟 Redux 强绑定
tRPC	~50 万	端到端类型安全 RPC
oRPC	新	tRPC 风格 + 跨框架
Hono RPC	涨	Hono 服务端的 RPC
React Query	改名 TanStack Query	同上
SWR + React 19	涨	use() hook 协同

9.1 TanStack Query（Tanner Linsley）

位置：数据获取层的”jQuery” —— 必装。

核心特性：
– 自动重试 / 缓存失效 / 重新请求
– 乐观更新
– 分页 / 无限滚动 / Suspense 集成
– DevTools 强大

9.2 tRPC

位置：端到端类型安全的 RPC 库（不通过网络协议，类型在编译时共享）。

核心特性：
– 服务端定义 schema，客户端自动获得类型
– 不需要 OpenAPI / GraphQL
– Next.js / Nuxt / SvelteKit / 任何 Node 框架都支持

2025-2026 状态：
– TS 全栈项目的”杀手锏”
– 生态：Prisma / Drizzle ORM 配合最佳

10. 第九梯队：测试

工具	用途	周下载	备注
Vitest	单元/组件测试（Vite 生态）	~500 万	Vite 项目首选
Jest	老牌测试	~2500 万	仍 React 主流
Playwright (Microsoft)	E2E 测试	#1，~600 万	跨浏览器
Cypress	E2E 测试	~400 万	被 Playwright 抢
Storybook	组件开发 + 文档	~300 万	仍是设计系统核心
Testing Library	组件测试	~2500 万	React Testing Library 最知名
Chromatic	Storybook 视觉回归	~5 万	商业
Happy DOM	轻量 DOM 模拟	涨	Vitest 内部用
jsdom	Node DOM 模拟	~3500 万	Jest 默认
Mock Service Worker (MSW)	API mock	~300 万	跨测试
Pact	契约测试	涨	微服务
K6 / Grafana k6	性能测试	涨	压测
Wallaby.js	商业测试工具	极小	商业
Qwik City Test	Qwik 测试	极小	新

10.1 Playwright（Microsoft）

位置：E2E 测试的事实标准。取代了 Cypress。

核心特性：
– 跨浏览器：Chromium / Firefox / WebKit（Safari）
– 多语言 SDK：JS / TS / Python / Java / .NET
– 自动等待：智能等待元素
– Trace Viewer：可视化调试
– Playwright Test：内置 test runner

2025-2026 状态：
– GitHub Stars 超越 Cypress
– VS Code 插件 + Trace Viewer + 录制器 体验最好

10.2 Vitest

位置：Vite 生态的 Jest 替代。

核心特性：
– 极快：HMR 模式（改文件立即跑测试）
– API 跟 Jest 兼容（describe it expect）
– TypeScript / ESM 原生

10.3 Mock Service Worker (MSW)

位置：API 模拟的现代方案。比 nock / axios-mock-adapter 更优雅。

核心特性：
– 浏览器 service worker + Node interceptor 双重支持
– 跟 fetch 真实集成
– Storybook / Vitest / Playwright 都好用

11. 第十梯队：3D / 可视化

库	用途	备注
Three.js	WebGL 3D	仍是 3D 事实标准
Babylon.js	WebGL 3D	微软维护，游戏向
PixiJS	WebGL 2D 游戏	性能好
Phaser	2D 游戏引擎	完整游戏框架
D3	数据可视化	老牌
Visx (Airbnb)	D3 + React 封装	涨
Observable Plot	D3 作者新项目	高分可视化
Apache ECharts	图表	国内主流（百度出品）
Chart.js	简单图表	经典
Recharts	React 图表	涨
Nivo	React 图表	涨
Vega / Vega-Lite	声明式可视化	学术
Highcharts	商业图表	商业首选
Plotly.js	科学图表	学术
Mapbox GL JS	地图	商业
Leaflet	地图	开源
deck.gl	Uber 出品大数据地图	涨
React Three Fiber	Three.js 的 React 封装	涨
drei	R3F 工具集	极常用
React Spring	物理动画	跟 R3F 协同
Motion (前 Framer Motion)	动画	涨
GSAP	时间轴动画	老牌商业
Lottie	设计师动画导出	字节跳动维护
anime.js	动画库	涨
Auto-Animate	一行动画	涨
WebGPU	浏览器原生 GPU	2025 开始 GA

12. 2025-2026 关键变化

12.1 shadcn/ui 取代了所有”组件库”地位

shadcn/ui 不是 npm 包，是复制粘贴的代码。Radix UI（headless）+ Tailwind 的组合，让项目拥有完整组件代码所有权。

影响：
– 组件库生态从”装包”变成”复制”
– 大量 shadcn 衍生主题（shadcn-nuxt、shadcn-svelte、shadcn-vue）
– 2024 年 GitHub 仓库增速第一的前端项目

12.2 Vite 完全吃掉了 Webpack 的新项目市场

工具	2020 份额	2024 份额	趋势
Webpack	80%	30%	存量多
Vite	< 5%	50%	新项目默认
Turbopack	0%	5%	Next.js 内置
Rspack	0%	5%	大厂迁移

12.3 React Server Components（RSC）改变一切

Next.js 13+ 的 RSC 改变了 React 项目的结构：
– 组件可以默认在服务端跑（不下载 JS）
– Server Action 让表单处理无需写 API route
– Streaming SSR 改善 TTFB

争议：RSC 概念复杂，client/server 边界模糊。学习曲线陡。

12.4 Svelte 5 runes 让 Svelte 重新有了”杀手特性”

Svelte 5（2024-10）推出 runes 范式：
– $state 声明响应式状态
– $derived 声明派生
– $effect 副作用

意义：从”框架自动推断响应式”变成”显式声明”，细粒度响应式 + 跟 Solid / Vue 3 ref / Qwik signals 思路一致。

12.5 TanStack Start（2025 末 GA）

TanStack Query 团队做的全栈框架。端到端类型安全 + 基于 TanStack Router。

12.6 Astro 5（2024-12）：Server Islands

Astro 的”按需 SSR 单个组件”概念——静态页里某些部分可以服务端动态渲染。不用整个 page 重 SSR。

12.7 Tauri 2.0（2024）：跨桌面 + 移动

Tauri 不再只是桌面，也能打 iOS / Android APK。Electron 替代品势头猛。

12.8 Bun 替代 Node 在工具链位置

Bun 替代了：
– Node（runtime）
– npm/yarn/pnpm（包管理）
– esbuild（transpile）
– Jest（test runner）
– Webpack（部分场景）

不是直接替代前端框架，但前端项目都受益于 Bun。

12.9 表单库：React Hook Form 稳，TanStack Form 涨

库	周下载	趋势
React Hook Form	~700 万	稳，仍是 React 默认
TanStack Form	涨	跨框架、type-safe
Conform	涨	跟 Remix/Next.js 协同
Formik	~200 万	退潮
Final Form	极小	退潮
VeeValidate	Vue 圈	稳
@felte/core	Svelte 圈	涨
Zod	~3500 万	类型验证库事实标准（不仅是表单）

12.10 ORM / 数据库工具

库	用途	流行度
Prisma	ORM	~500 万周下载
Drizzle ORM	TypeScript ORM	涨，~200 万
Kysely	类型安全 SQL builder	涨
Knex	老牌 query builder	稳
Sequelize	老牌 ORM	退潮
TypeORM	老牌	退潮
Mongoose	MongoDB ODM	稳
pg	Node Postgres driver	涨

Drizzle 跟 Prisma 抢（Drizzle 更”SQL-first”，Prisma 更”schema-first”）。

13. 理念分类：为什么这些框架长得不一样

按”底层范式”分类，看清”谁在抄谁”：

理念	代表框架	关键特征
Virtual DOM + diff	React、Vue 2、Solid（兼容层）	运行时 diff 计算
编译时 / 零运行时	Svelte、Solid（核心）	编译成原生 JS
Signals 响应式	Solid、Svelte 5、Vue 3 ref、Qwik	细粒度追踪
Resumable（不 hydrate）	Qwik、Astro Islands	SSR 序列化，客户端续跑
Island Architecture	Astro、Fresh	默认零 JS，按需 hydrate
Server Components / RSC	Next.js、Remix/RR7	组件在服务端跑
Web Components 优先	Lit、Stencil、FAST	浏览器原生 custom elements
Reactive OOP	MobX	observable + autorun
State Machine	XState	显式状态转移图
函数式纯	Elm、ReasonML	已退潮但 Elm 仍有粉丝

近 5 年的演进方向：

2015-2020: Virtual DOM 一统江湖
     │
     ├── React (VDOM + Hooks)
     ├── Vue 2 (VDOM + Options API)
     └── Svelte (编译时，杀出重围)

2020-2023: 编译时 + 细粒度响应式
     │
     ├── Svelte 3/4 (编译时响应式)
     ├── Solid (细粒度 signals)
     └── Vue 3 ref (signals 思想)

2023-2026: Resumable + Server Components + 多范式混合
     │
     ├── Qwik (Resumable)
     ├── React Server Components (服务端组件)
     ├── Svelte 5 runes (显式 signals)
     └── Astro Islands (多范式)

核心趋势：从”客户端框架” → “客户端 + 服务端混合架构”。

14. 按”使用场景”的选择决策树

你的项目是什么？
│
├── 内容站 / 博客 / 文档 / 营销页 / 官网
│    ├── 静态为主 + 偶尔交互
│    │    └── Astro（多框架支持 + 静态快 + MDX）
│    ├── 想要 React 生态
│    │    └── Next.js (SSG 模式) 或 Astro + React
│    └── 想要 Vue 生态
│         └── Nuxt (SSG) 或 Astro + Vue
│
├── 普通 Web App（SaaS / 后台 / 移动 Web）
│    ├── 团队熟悉 React
│    │    └── Next.js + shadcn/ui + Tailwind + Zustand + TanStack Query
│    ├── 团队熟悉 Vue
│    │    └── Nuxt + Naive UI (国内) / shadcn-vue (国外) + Pinia
│    ├── 团队熟悉 Angular
│    │    └── Angular + Angular Material / PrimeNG
│    └── 团队熟悉 Svelte
│         └── SvelteKit + shadcn-svelte
│
├── 重交互 / 性能敏感
│    ├── JS bundle 最小
│    │    └── Svelte / SvelteKit
│    ├── 极致响应式
│    │    └── Solid / SolidStart
│    ├── 0 hydration
│    │    └── Qwik
│    └── 复杂状态机
│         └── React + XState / Zustand
│
├── 移动端
│    ├── 跨 iOS + Android + 团队 JS 背景
│    │    └── React Native + Expo（事实标准）
│    ├── 自绘 UI / 跨端一致 / 3D 动画
│    │    └── Flutter
│    ├── 想要 Web 技术栈 + 原生
│    │    └── Ionic + Capacitor
│    ├── PWA 优先
│    │    └── Next.js / Nuxt (PWA plugin)
│    └── iOS 专属 / Android 专属
│         └── SwiftUI / Jetpack Compose（无替代）
│
├── 桌面应用
│    ├── 轻量 + 跨平台 + 团队有 Rust 能力
│    │    └── Tauri 2.0
│    ├── 生态全 / 大型应用
│    │    └── Electron
│    └── macOS 专属
│         └── SwiftUI
│
├── 3D / 游戏 / 可视化
│    ├── WebGL 3D
│    │    └── Three.js（事实标准）
│    ├── 游戏级 3D
│    │    └── Babylon.js
│    ├── 2D 游戏
│    │    └── PixiJS / Phaser
│    ├── 数据可视化
│    │    └── D3 / Visx / Observable Plot
│    └── 业务图表
│         └── ECharts (国内) / Recharts / Nivo (国外)
│
└── 后台 / 内部工具
     ├── 快速出活
     │    └── Refine / ToolJet / Appsmith (低代码)
     └── 复杂业务
          └── Ant Design Pro (React) / vue-vben-admin (Vue)

15. 新项目”默认套件”（2026 答案）

15.1 欧美新项目（”T3 stack” 变体）

Runtime:     Bun 或 Node 20+
包管理:      bun install 或 pnpm
语言:        TypeScript
UI 框架:     React
Meta-框架:   Next.js (App Router)
UI 组件:     shadcn/ui (复制粘贴)
CSS:         Tailwind CSS v4
状态管理:    Zustand (本地) + TanStack Query (服务器)
表单:        React Hook Form + Zod
动画:        Motion (前 Framer Motion)
图标:        Lucide Icons 或 Radix Icons
测试:        Vitest (单元) + Playwright (E2E)
Linter:      Biome
构建:        Vite (dev) / Turbopack (Next) / Bun Bundler
ORM:         Drizzle 或 Prisma
认证:        Auth.js (前 NextAuth) 或 Clerk
部署:        Vercel (首选) / Cloudflare / 自建
监控:        Sentry + PostHog

核心哲学：
– 端到端 TypeScript
– Server-first（RSC 模式）
– 类型安全（Zod / tRPC）
– “复制而不是依赖”（shadcn/ui 范式）

15.2 亚洲（中国）新项目

Runtime:     Node 20+ / pnpm
语言:        TypeScript 或 JavaScript
UI 框架:     Vue 3
Meta-框架:   Nuxt 3
UI 组件:     Element Plus (大企业) / Naive UI (新项目) / shadcn-vue (新派)
CSS:         Tailwind CSS 或 SCSS
状态管理:    Pinia
表单:        VeeValidate + Zod
图标:        @iconify/vue (Iconify)
测试:        Vitest + Playwright
构建:        Vite
ORM:         Prisma / TypeORM
认证:        Sa-Token (国内) / Auth.js
部署:        阿里云 / 腾讯云 / 华为云 / 内部 k8s
监控:        阿里云 ARMS / Sentry 国内替代

核心差异：
– Vue > React（中国市场习惯）
– Element Plus / Naive UI（企业后台标配）
– 国内云厂商部署
– 用 SCSS 的比例更高

15.3 大型企业 / 长期项目

UI 框架:     Angular（首选）或 React
UI 组件:     Angular Material (Angular) / Ant Design Pro (React)
状态管理:    NgRx (Angular) / Redux Toolkit (React)
构建:        Webpack (存量) / Rspack (迁移)
测试:        Karma + Jasmine (Angular 老) / Jest (现代)
部署:        内部 k8s

核心考量：
– 团队 5-50 人协作
– 项目 5-10 年生命周期
– 强类型 / 强约束

15.4 性能敏感 / 创新项目

UI 框架:     Svelte 5 / Solid / Qwik
Meta-框架:   SvelteKit / SolidStart / Qwik City
CSS:         Tailwind / UnoCSS
状态管理:    框架内置 runes / signals
构建:        Vite
部署:        Cloudflare Workers / Vercel Edge

16. 数据来源与方法

16.1 数据维度

来源	类型	反映
npmjs.com 公开下载量	周下载	实际安装使用
GitHub REST API	stars / contributors	关注度 + 活跃度
State of JS 2024	年度开发者调查	开发者偏好 + 使用
JetBrains State of Developer Ecosystem 2024	跨语言开发者调查	工具链使用
Stack Overflow Developer Survey 2024	全球开发者	框架使用占比
Indeed / LinkedIn 招聘 JD	商业需求	商业落地
Bundlephobia	包体积	工程友好度
star-history.com	长期增长	趋势
个人观察 / 行业讨论	定性	趋势补充

16.2 数字粗略性说明

npm 周下载：包含 CI、bot、间接依赖，可能高估
GitHub stars：包含”点 star 收藏”用户，可能高估
招聘数据：LinkedIn 搜索受限于关键词
趋势定性：参考多个独立来源交叉

16.3 写作时间

本文写于 2026-06。前端生态变化快（半年一小变，一年一大变），引用具体数据请注明时间。

16.4 不收录

退场项目：Backbone、Ember、Knockout、AngularJS、MooTools、YUI、Dojo、ExtJS、Polymer、Aurelia、Mithril、Stimulus、StimulusReflex、Hotwire、Turbo、Unpoly、HTMX（HTMX 仍有受众）、Marko、Hyperdom、Ractive、Riot、Preact（保留但已不是主菜）
极小众：Gradio（Python）、Streamlit（Python）、Observable Framework、Refine、ToolJet、Appsmith、Budibase
特定领域：OpenLayers（地图）、Cesium（3D 地图）、PDF.js、jsPDF、Fabric.js（画布编辑器）、Konva（2D 画布）、tldraw（白板）

附录：完整资源地图（2026-06 速查）

┌──────────────────────────────────────────────────────────┐
│                  2026 前端"心智份额"图谱                   │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  UI 框架                                                  │
│   ├── React (50%)  ◄──────  #1 必学                       │
│   ├── Vue (25%)    ◄──────  #2                            │
│   ├── Svelte (10%) ◄──────  性能派最爱                    │
│   ├── Angular (8%) ◄──────  企业中坚                      │
│   ├── Solid (3%)   ◄──────  极客                          │
│   └── Qwik (2%)    ◄──────  极客                          │
│                                                          │
│  Meta-Framework                                          │
│   ├── Next.js (50%) ◄──── #1 React 全栈                   │
│   ├── Nuxt (25%)     ◄──── #1 Vue 全栈                    │
│   ├── SvelteKit (10%)                                       │
│   ├── Astro (10%)     ◄──── 内容站首选                     │
│   └── Remix/RR7 (3%)                                       │
│                                                          │
│  样式                                                     │
│   ├── Tailwind CSS (60%) ◄── 事实标准                      │
│   ├── CSS Modules (15%)                                    │
│   ├── SCSS/Sass (10%)                                     │
│   ├── styled-components (5%)                               │
│   ├── CSS-in-JS (其他)                                     │
│   └── Vanilla Extract / Panda CSS (5%)                    │
│                                                          │
│  状态管理                                                 │
│   ├── TanStack Query (40%) ◄── 服务器状态                  │
│   ├── Zustand (20%)         ◄── 本地状态                   │
│   ├── Pinia (15%)                                              │
│   ├── Redux Toolkit (10%)                                     │
│   └── Jotai / Valtio / MobX (其他)                          │
│                                                          │
│  组件库                                                   │
│   ├── shadcn/ui (复制粘贴) ◄── 2024 范式                   │
│   ├── Material UI (MUI)                                       │
│   ├── Mantine                                                │
│   ├── Chakra UI                                              │
│   ├── Ant Design (中国出海)                                   │
│   ├── Element Plus (中国国内)                                 │
│   └── Naive UI (中国新派)                                    │
│                                                          │
│  构建                                                     │
│   ├── Vite (#1 dev server)                                   │
│   ├── Turbopack (Next.js)                                    │
│   ├── Rspack (大厂迁移)                                       │
│   ├── esbuild / SWC (transpiler)                             │
│   ├── Bun Bundler                                            │
│   └── Webpack (存量)                                          │
│                                                          │
│  测试                                                     │
│   ├── Playwright (#1 E2E)                                    │
│   ├── Vitest (Vite 生态单元)                                  │
│   ├── Jest (React 存量)                                       │
│   ├── Testing Library (组件)                                  │
│   └── MSW (mock)                                              │
│                                                          │
│  运行时 / 工具链                                            │
│   ├── Node.js / Bun (runtime)                                │
│   ├── pnpm / bun (包管理)                                    │
│   ├── TypeScript (类型)                                       │
│   ├── Biome (lint+format, 替代 ESLint+Prettier)              │
│   └── Vite / Webpack / Turbopack                              │
│                                                          │
│  跨端                                                     │
│   ├── React Native + Expo (#1 移动)                          │
│   ├── Flutter (Google)                                        │
│   ├── Tauri (#1 轻量桌面)                                      │
│   └── Electron (#1 桌面生态)                                  │
│                                                          │
│  3D / 可视化                                              │
│   ├── Three.js (#1 3D)                                        │
│   ├── Babylon.js (游戏)                                       │
│   ├── PixiJS (2D 游戏)                                        │
│   ├── D3 / Visx / Observable Plot                              │
│   └── ECharts / Recharts / Nivo                                │
│                                                          │
└──────────────────────────────────────────────────────────┘

一句话总结

2026 欧美新项目默认套件 = React + Next.js (App Router) + TypeScript + Tailwind CSS v4 + shadcn/ui + Zustand + TanStack Query + Bun + Biome + Vite + Playwright

2026 亚洲（中国）新项目默认套件 = Vue 3 + Nuxt 3 + TypeScript + Tailwind + Element Plus / Naive UI + Pinia + Axios + Vite + Vitest + pnpm

跨端选 React Native + Expo（首选）；桌面选 Tauri（轻量）/ Electron（生态）

Svelte 5 / Qwik / Solid 是”性能派 + 开发者喜爱度第一”——但市场份额仍小

Angular 仍是企业大项目的中流砥柱，新项目几乎不选

作者注：本文成文过程中参考了 2025-2026 时点的 npm 周下载、GitHub stars、State of JS 2024、JetBrains DevEco 2024、Stack Overflow 2024、Indeed/LinkedIn 招聘数据等多源信息。前端生态变化快（半年一小变，一年一大变），引用具体数字请注明时点。