⚔️ 图谱 · 竞争与替代关系

这张图在说什么

关系图谱-技术因果链关心”谁催生了谁”,这张图关心另外两件事:谁取代了谁、谁和谁在竞争共存。因为前端史里”取代”这个词其实很微妙——有的取代是抢走了全部市场份额,有的只是抢走了心智份额(mindshare):老技术还在跑,只是没人愿意拿它开新项目了。这张图用三种边样式把这三类关系区分清楚。

怎么看 · 三种边样式

催生:A -->|催生: 原因| B —— 普通实线箭头,A 的痛点/红利促成了 B 的诞生。

取代/淘汰:A ==>|取代: 原因| B —— 粗箭头,B 在某个维度上把 A 顶替掉了。

竞争共存:A <-.->|竞争| B —— 虚线双向,两者并存、各有地盘、互相施压但谁都没死。

看图重点不在节点,而在边的样式和标签:它告诉你这是一场”你死我活”还是”长期对峙”。

一、框架战场 · 取代 mindshare 与三足鼎立

flowchart LR
    jquery["jQuery 2006"]
    backbone["Backbone 2010"]
    angularjs["AngularJS 2010"]
    react["React 2013"]
    vue["Vue 2014"]
    angular["Angular 2+ 2016"]

    jquery ==>|"取代: 命令式 → 声明式范式碾压"| react
    backbone ==>|"取代: 弱约定的 MVC 被组件化淘汰"| react
    angularjs ==>|"取代: 双向绑定性能崩 + 不兼容升级劝退"| react
    backbone -.->|"催生期同台竞争"| angularjs

    react <-.->|"竞争: 灵活 vs 渐进易用"| vue
    react <-.->|"竞争: 库 vs 全家桶框架"| angular
    vue <-.->|"竞争: 中文社区 vs 企业级"| angular

    classDef win fill:#e3f2fd,stroke:#1976d2;
    classDef old fill:#eeeeee,stroke:#9e9e9e;
    class react,vue,angular win;
    class jquery,backbone,angularjs old;

"取代 mindshare" ≠ "取代份额"

jQuery 至今仍跑在海量存量站点上(份额惊人),但新项目几乎无人选它——React 取代的是 jQuery 的心智份额,不是它的装机量。AngularJS 则不同:它的 1.x 因为”性能崩 + 升级到 2.0 完全不兼容”被开发者主动抛弃,取代得更彻底。而 React / Vue / Angular 三者是典型的竞争共存:React 灵活、生态最大;Vue 渐进、上手快、中文社区强;Angular 全家桶、强约定、企业级。三者互相施压但谁也吃不掉谁。详见前端框架演进史、为什么React战胜了AngularJS。

二、工具链战场 · 构建、包管理、运行时

flowchart LR
    subgraph BUILD["打包器"]
        webpack["Webpack"]
        vite["Vite"]
        turbopack["Turbopack"]
        rspack["Rspack"]
        webpack ==>|"取代: dev 冷启动/HMR 体验"| vite
        vite <-.->|"竞争: 谁是下一代默认"| turbopack
        vite <-.->|"竞争: Rust 兼容 Webpack 生态"| rspack
        turbopack <-.->|"竞争"| rspack
    end

    subgraph PKG["包管理器"]
        npm["npm"]
        yarn["Yarn"]
        pnpm["pnpm"]
        npm ==>|"取代: 锁文件 + 并行安装"| yarn
        yarn ==>|"取代: 硬链接 + 治幽灵依赖"| pnpm
        npm <-.->|"竞争: 官方仍是默认"| pnpm
    end

    subgraph RT["运行时"]
        node["Node.js"]
        deno["Deno"]
        bun["Bun"]
        node <-.->|"竞争: 安全/TS/ESM 优先"| deno
        node <-.->|"竞争: 一体化 + 极速"| bun
        deno <-.->|"竞争"| bun
    end

工具链里"迭代取代"与"竞争共存"并存

迭代取代(链式):npm → Yarn → pnpm 是清晰的接力,每一棒都解决上一棒的具体痛点(无锁文件 → 幽灵依赖 → 磁盘黑洞)。但要注意 npm 作为官方仍是默认值,所以它和 pnpm 之间又是竞争关系。

竞争共存(对峙):Vite 已在 dev 体验上取代了 Webpack,但”下一代打包器默认”之争(Turbopack vs Vite/Rolldown vs Rspack)远未分胜负。运行时同理,Node 的生态护城河让 Deno/Bun 只能在性能和体验上差异化竞争,短期无人能取代 Node。详见 Webpack、Vite、Turbopack、npm-Yarn-pnpm-包管理、Node.js、Deno、Bun 与为什么Vite能取代Webpack、为什么pnpm解决了依赖问题。

三、状态管理战场 · 反样板的多方混战

flowchart LR
    redux["Redux 2015"]
    mobx["MobX"]
    zustand["Zustand 2021"]
    pinia["Pinia"]

    redux <-.->|"竞争: 可预测 vs 响应式"| mobx
    redux <-.->|"竞争: 样板多 vs 极简"| zustand
    mobx <-.->|"竞争: 自动追踪两条路线"| zustand
    redux -.->|"反样板浪潮 (Vue 侧)"| pinia

    classDef sw fill:#ede7f6,stroke:#5e35b1;
    class redux,mobx,zustand,pinia sw;

没有"取代",只有"反样板"的持续竞争

状态管理领域几乎没有干净的取代——Redux 至今仍是大型 React 应用的常见选择(尤其搭配 Redux Toolkit 大幅削减了样板)。MobX、Zustand 都是冲着”Redux 样板太多”来的差异化竞争者,但它们彼此也是竞品。这是一场多方共存的混战,而非接力替代。详见 Redux、MobX、Zustand、Vuex-Pinia。

四、“取代”事件总结表

关键:区分"取代了全部份额"还是"只取代了 mindshare"

同样叫”取代”,含义差很多。下表把每个取代事件拆成三栏:谁取代谁 / 取代的是什么 / 核心原因。

取代事件	取代的是什么	核心原因
jQuery → React	心智份额(jQuery 存量仍巨大)	命令式 DOM 不可维护、无组件复用;声明式 `UI=f(state)` 范式碾压
Backbone → React / Angular	几乎全部份额	约定太弱、需手写大量胶水代码,被组件化框架完整淘汰
AngularJS → React	大部分份额 + 心智份额	双向绑定脏检查在大应用性能崩;1.x→2.0 不兼容升级劝退社区
Webpack → Vite(dev 侧)	新项目的 dev 心智份额	冷启动慢、HMR 慢;Vite 借原生 ESM 实现开发期免打包(生产构建 Webpack 仍大量在用)
npm → Yarn	一段时期的心智份额	npm 早期无锁文件、安装慢且不确定;Yarn 带来锁文件 + 并行安装
Yarn → pnpm	新项目的心智份额	node_modules 黑洞 + 幽灵依赖;pnpm 用硬链接 + 严格依赖树根治

读这张表的方法

凡是写”心智份额”的,老技术其实没死,只是新项目不再选它;凡是写”全部份额”的(如 Backbone),才是真正意义上的淘汰。前端史上绝大多数”取代”都属于前者——这也解释了为什么存量项目里 jQuery、Webpack、Redux 依然到处都是。技术的死亡是缓慢的,死的往往先是它在开发者心里的位置。

前端技术演化史

探索

图谱 · 竞争与替代关系

⚔️ 图谱 · 竞争与替代关系

一、框架战场 · 取代 mindshare 与三足鼎立

二、工具链战场 · 构建、包管理、运行时

三、状态管理战场 · 反样板的多方混战

四、“取代”事件总结表

关系图谱

目录

反向链接