← Research

LECTURE · FRONTEND · ~25 MIN

前端不乱,就五层

你打开 GitHub 看一眼前端项目—— React、Vue、Vite、Webpack、Turbopack、Tailwind、shadcn、Next、Nuxt、Astro、TypeScript——名字一堆,吓退一半人。真相是这堆东西堆在五层上:语言 → UI 框架 → 构建工具 → 样式方案 → 元框架。每层就那么几个并列选项,挑一个就行。乱的不是技术,是没看清分层。

问前端技术里面那都是什么东西,看不懂 读时~25 min
路线图

从底层语言爬到顶层元框架

咱们从最底下的语言层开始,一层一层往上爬:UI 框架(把 HTML 模板化)、构建工具(把代码打包给浏览器)、样式方案(怎么写 CSS 不乱)、元框架(把上面四层全包了)。爬到顶,你回头看那堆名字,每个都能定位到某一层——这事儿就不乱了。

01 语言层 HTML / CSS / JS / TS 02 UI 框架 React 主导 03 构建工具 Vite 已经赢了 04 样式方案 Tailwind + shadcn 05 元框架 Next 占大头
Roadmap. 五层从下往上叠:最底是浏览器原生看懂的语言,最顶是把所有东西打包好让你直接开干的元框架。每一层都依赖前面一层,但每一层都有 2-5 个并列选项可挑。

语言层 — 四个名字,只有两半是真语言

这一层最底,浏览器就认这几个东西。说"四个语言"其实有点骗人——里头真的算独立语言的就两个半。咱们一个一个拆。

HTML 是结构。你写的每个网页骨架,标题、段落、按钮,都是 HTML 标签搭出来的。浏览器原生认识。CSS 是样式。HTML 给你骨架,CSS 给你皮肉——颜色、字体、布局、动画。也是浏览器原生认识。这俩是兄弟,谁都跑不掉,网页就这两根柱子撑着。

JavaScript 是行为。点按钮发请求、表单验证、数据可视化、单页应用——所有"动态"全靠它。也是浏览器原生认识——这是浏览器里唯一原生支持的编程语言1。🟢 high

那 TypeScript 呢?TS 不是新语言,是 JS 加了类型注解的超集——你写 TS,编译之后还是 JS,跑在浏览器里的还是 JS。浏览器根本不认识 TS。这事儿很多人搞不清——TS 不是"取代 JS",是给 JS 加保险。

2026 年这一层最大的变化是 TypeScript 已经成默认。Stack Overflow 2025 调查里 48.8% 专业开发者用 TS,satisfaction 84.1%2。GitHub Octoverse 2025 说 TS 已经超过 Java 进 GitHub 语言前三,贡献者增长率 66% 年化,首次超过 JS 本身3。🟢 high 现在主流框架(Next.js / Nuxt / SvelteKit)新建项目默认 TS 配置,你不学也没事,但读别人代码就吃力。

语言角色必学度学习曲线
HTML结构必几小时入门,深入到 a11y / SEO 才费劲
CSS样式必入门易,Grid / Flexbox 中等,响应式 / 动画难
JavaScript行为 / 交互必函数 / 闭包 / 异步,三层难度
TypeScriptJS 加类型强烈推荐(2026 已是默认)1-2 周上手类型系统,泛型再难一阵
思考一下

有人说"我先学 TypeScript,JS 不用学了行不行?"——这事儿就像问"我直接学带保险的开车行不行,不学开车"。答案是:你得先会开车(JS),然后保险(TS)是给你的安全网。底子还是 JS——闭包、原型链、事件循环这些 JS 概念,TS 没免你。

UI 框架层 — React 还是最有用,但不是最爽

你说为什么需要框架?——光用 HTML/CSS/JS 不也能写网页吗?能。但你的网页一旦超过 5 页、需要组件复用、需要数据驱动 UI 更新——光手写 DOM 操作就是噩梦。框架的作用,就是把"数据→UI"这件事抽象成声明式的:你告诉框架"现在数据长这样",它替你算 DOM 怎么改。

2026 年这一层的格局:React 一家独大,Vue 稳第二,Svelte 在上升,Solid 满意度高但市占小。State of JS 2025 调查里,React 使用率 69.9%,Vue 44.8%,Svelte 25.8%,Angular 22.1%4。🟢 high

但有个反常识的数据——满意度跟市占率不是一回事。Solid.js 连续 5 年(2021-2025)拿满意度第一4,但市占率只有 10% 左右。Svelte 也类似——React 用户继续写 React 主要因为"工作市场默认是它",而 Vue / Svelte 用户是"真的爱"4。

四个框架的心智模型

React:函数组件 + JSX(HTML 写在 JS 里)+ Hooks(useState / useEffect 这些)。心智模型是"组件是个函数,接 props 吐 JSX"。Hooks 上手要 1 个月——闭包陷阱 / 依赖数组这些坑是真的多。但生态最大,工作机会最多。

Vue:template 语法(HTML 加指令)+ reactive(数据自动追踪)+ Composition API(类似 Hooks)。心智模型最像传统 HTML 增强版——非前端出身的人上手 Vue 比 React 快。

Svelte:编译时 reactive——你写"这个变量变了 UI 跟着变"的语法,Svelte 编译器在构建时把这个翻译成 imperative DOM 操作。运行时没有 virtual DOM,bundle 小、性能好。Svelte 5 (2024) 加了 Runes(显式 reactivity API),口碑回来了。

Solid:fine-grained reactivity——长得像 React (JSX + 函数组件),但底层是细粒度响应式。性能比 React 好很多,API 比 React 少坑。但生态小、找工作几乎用不上。

框架心智模型市占率学习曲线适合谁
React函数 + JSX + Hooks69.9%中等(Hooks 1 个月)找工作 / 大型项目 / 跟随主流
Vuetemplate + reactive44.8%平缓中型项目 / 团队混进非前端
Svelte编译时 reactive25.8%短(几天上手)个人项目 / 性能敏感 / 想松快
Solidfine-grained reactivity~10%短(JSX 像 React)想要 React 写法 + 更好性能
反证

"Svelte / Solid 满意度高,那不应该选它们吗?"——反证是:满意度 ≠ 市占率,市占率才决定你的生态、招聘、第三方库。Solid 连续 5 年满意度第一,2026 年市占率仍只有 ~10%。"最爽"不等于"最该学"——你写个人项目可以爽,但找工作大概率写 React,不是 Solid。本讲稿仍倾向:个人开发者选 React 或 Vue(生态保险);非常确定不需要找前端工作 / 性能敏感 / 想松快,可以试 Svelte。

构建工具层 — Vite 已经赢了,但 Webpack 还在

这一层的作用是把你写的代码翻译成浏览器能跑的。你写的 TS / JSX / Vue / Svelte——这些浏览器都不认识。构建工具(也叫 bundler)做几件事:

  1. 把 TS / JSX 编译成 JS
  2. 把几十上百个文件打包成几个
  3. 开发时启动一个本地服务器(dev server),改文件自动刷新(Hot Module Replacement, HMR)
  4. 生产时压缩、tree-shaking、code-splitting

2026 年这一层的格局:Vite 在新项目里已经赢了,Webpack 还在但没人爱,Turbopack 是 Next.js 的自家货。Vite 周下载 5300 万,Webpack 3600 万5。🟢 high Webpack 用的人多(86%),但只有 14% 喜欢它5——这是个尴尬的位置。

关键转折是 2020 年——尤雨溪(Vue 作者)做了 Vite。Vite 的思路是:开发时用浏览器原生 ESM (ES Modules) 直接加载文件,不打包——所以启动速度是亚秒级。生产时再用 Rollup 打包5。这对比 Webpack 几十秒到几分钟的冷启动是降维打击。

2026 年的最新动态:Vite 8 用 Rolldown(Rust 写的新 bundler)替换底层的 esbuild + Rollup,开发 / 生产用同一个工具链5。同时 Turbopack 在 Next.js 16 是默认 bundler(Next 团队搞的 Rust bundler,主要为大型 React 应用优化)6。🟢 high

工具定位速度默认在哪里
Webpack传统 bundler慢(几十秒-分钟启动),配置深但繁琐老 React 项目 / 老 Next.js
Vite新一代 bundler极快(亚秒启动,即时 HMR)Vue / Svelte / Astro / Angular 17+ / SolidStart
TurbopackNext.js 自家 Rust bundler极快,大型应用优化更好Next.js 16+ 默认
esbuild底层 Go 编译器最底层,极快被 Vite / 其它工具用,你不直接用
常见错答

"我的项目慢——换 Vite 就快了。"——你以为换 Vite 就治百病,其实不是。Vite 救的是开发时启动 + HMR慢。如果你的痛点是生产构建产物太大 / 首屏加载慢,换 Vite 救不了——那是代码体积问题(JS bundle 几 MB),得靠 code-splitting、lazy load、tree-shaking 来解。先看清你慢在哪儿,再决定换不换 bundler。

样式方案层 — Tailwind + shadcn 已经一统江湖

这一层的问题:CSS 怎么写才不会乱?——这事儿前端折腾了 20 年。早期所有人都把 CSS 全写到一个 main.css 里,几千行后改一个颜色得满文件找。后来发明了各种"作用域"方案,最近 5 年 Tailwind 又把方向掀了。

2026 年这一层的格局:新项目几乎默认 Tailwind + shadcn 这套。React + Next.js + Tailwind + shadcn 已经是新 React 应用的主导栈——从初创 MVP 到企业 dashboard7。🟢 high

但要搞清楚——shadcn 不是组件库。它是个"复制粘贴的组件配方集"——你不安装 shadcn 当 npm 包,而是用 CLI 把组件代码复制到你自己的项目里,然后改成你想要的样子。这套哲学叫"copy-paste components"。所以 shadcn 必须搭 Tailwind 用——它的组件全是 Tailwind utility class 拼的,你换成 CSS Modules 就得重写每个组件7。

四种主要方案的哲学

vanilla CSS:全部自己写。小项目 / 静态站还在用,大型项目 = 灾难。

CSS Modules:每个组件一个 .module.css 文件,class 名自动 hash 加前缀,只在当前组件作用域生效。安全但 verbose——你要给每个 class 想名字。

CSS-in-JS(styled-components / Emotion):在 JS 里直接写 CSS。组件 + 样式同位置。曾经很火,2026 年在下滑——styled-components 维护停滞,runtime 开销也被诟病。

Tailwind:utility-first——不发明 class 名,直接在 className 里拼原子样式("p-4 bg-red-500 rounded-lg")。学一次,跨项目复用。生产 build tree-shaking 后 bundle 通常 <10KB。

方案类型哲学2026 状态
vanilla CSS原生全部自己写小项目 / 静态站还在用
CSS Modulesscoped CSS局部作用域避免全局污染React 圈中度流行
CSS-in-JSJS 里写 CSS组件 + 样式同位置在下滑(维护停滞,runtime 开销)
Tailwindutility-first原子 class 直接拼新项目主流
shadcn/uicopy-paste 组件不是 lib,是组件配方集Tailwind 用户必备
举个具体的

"我建一个新 React 项目,这一层挑啥?"——不用想,直接 Tailwind + shadcn。理由:Tailwind 是行业默认,学一次跨项目复用;shadcn 组件代码就在你自己 repo 里,你想改就改,不被 npm 包绑死。这套组合的"踩坑成本"几乎为零——出了问题去 Tailwind 或 shadcn 的 GitHub issues 看一眼就解决。

反过来——如果你接的是老项目,本来就用 CSS Modules 或 styled-components,千万别"为了赶时髦"重写一遍。样式重写一遍能把项目搞炸,不值得。

元框架层 — Next.js 把上面四层全包了

到这一层就有意思了。元框架(meta-framework)就是"框架的框架"——它把语言、UI 框架、构建工具、样式方案这四层都预先配好,你装一个 Next.js,上面四层全帮你装齐(TypeScript + React + Turbopack + 可选 Tailwind)。多出来的好处包括:

  1. 路由——按文件夹自动生成路由,不用手写 react-router 配置
  2. SSR / SSG——服务端渲染或静态生成,首屏快、SEO 好
  3. API routes——前后端写一起,简单 API 不用单独搞后端
  4. Server Components(React 19 + Next 15+)——组件可以"只在服务器跑",bundle 减肥

2026 年这一层格局:Next.js 67% 新企业 React 项目,Remix(React Router v7)18%,Astro 15% 且涨8。🟢 high Cloudflare 2026 年 1 月把 Astro 收购了8,未来 Astro 跟 Cloudflare Workers 整合可能加深。🟡 med

元框架底层强项适合
Next.jsReact + TurbopackSSR / SSG / RSC / Vercel 集成SaaS / 企业 / B2B 默认
NuxtVue + Vite + NitroVue 团队 / 模块生态成熟Vue 大型项目
SvelteKitSvelte + Vite性能 + 简洁Svelte 项目
Astro内容优先 island 架构静态站 + 局部交互 (Lighthouse 40-60% 高于对手)博客 / 营销站 / 内容站
Remix (React Router v7)React + web standards表单 / 渐进增强 / edge电商(Shopify Hydrogen)/ 表单密集

这层最容易混的事

很多人把 React 跟 Next.js 当成同一个东西,因为新教程几乎都是 Next.js 起手——其实 React 在第二层(UI 框架),Next.js 在第五层(元框架,内置了 React)。这就像汽车跟丰田卡罗拉的关系——React 是发动机,Next.js 是把发动机装进车里、加上车架、轮子、空调,一辆能开的车。

思考一下

元框架是必需吗?——不一定。如果你的需求是"一个简单 SPA 或后台",纯 React + Vite + Tailwind 就够,完全不需要 Next.js。但 90% 现代前端项目都要 SSR / SSG / 路由——这些自己搭比用元框架难。

给个人开发者的判断:要 SEO → 上 Astro 或 Next.js。不要 SEO(后台 / 内部工具) → 纯 React + Vite 就够,别让 Next.js 把项目搞复杂。

综合判断

五层装配 = 一个前端项目

回头看你最初的问题——"前端技术里面都是什么东西"。说白了,前端不是一堆乱七八糟的工具,是分了五层的一堆并列选项。你下次再看到一个陌生的名字,先问自己一句:它属于哪一层?——分清楚层,这名字就有了位置,不再是悬空的概念。

2026 年最常见的两套搭配,你认这两套就能看懂 80% 的前端讨论:

主流搭配 A——React 生态完整版:

  1. TypeScript(语言层)
  2. React(UI 框架)
  3. Turbopack(构建工具,Next.js 自带)
  4. Tailwind + shadcn(样式)
  5. Next.js(元框架,把上面 4 层包起来)

主流搭配 B——独立开发者轻量版:

  1. TypeScript(语言层)
  2. React 或 Vue(UI 框架)
  3. Vite(构建工具)
  4. Tailwind + shadcn(样式)
  5. 不要元框架(直接是个 SPA)

有人不要元框架,就到第 4 层——Vite + React + TS + Tailwind 一个 SPA 就完事。也有人换换名字:Vue + Vite + Tailwind + Nuxt,或者 Svelte + Vite + Tailwind + SvelteKit——结构完全一样,只是每一层换了个名字。

05 · 元框架 Next.js 04 · 样式方案 Tailwind + shadcn 03 · 构建工具 Turbopack / Vite 02 · UI 框架 React 01 · 语言 TypeScript
Fig 1. 一个典型的 2026 主流栈——每层只挑一个名字。换换名字(Vue 替 React、Vite 替 Turbopack、Nuxt 替 Next.js),结构不变。

你要做个人开发者,我的具体建议:从下往上学,但不用都学透。HTML / CSS 必须扎实,JS 中等就好,TS 知道类型怎么标就行。UI 框架挑 React(找工作)或 Vue(更顺手),挑一个深学。构建工具用 Vite 就行,不用管 Webpack 怎么配。样式直接 Tailwind + shadcn,别折腾别的。元框架——要 SEO 上 Next.js / Astro,不要就别用。

记住一句话——乱不是技术真乱,是没看清分层。看清五层,前端就这么回事儿。

关键不确定性

这些地方我说实话也没全把握

  • React Server Components 是不是已经稳了——2026 年 React 19 + Next 15+ 把 RSC 当默认架构,但实际行业 production 体验混杂。有团队上了 RSC 之后复杂度增加,有"架构约束、意外耦合、实际收益不如预期"9。🟡 med 我倾向"个人开发者用 RSC 是 overkill",但这事儿业界还在打架。
  • Astro 被 Cloudflare 收购后会怎么走——2026 年 1 月才发生,Astro 跟 Cloudflare Workers 整合的细节、license 走向、社区反应还没完全看清8。短期推荐 Astro 没问题,中长期看 Cloudflare 怎么管。🟡 med
  • Solid / Qwik 这些新框架会不会爆发——Solid 满意度高但市占率卡在 ~10% 几年了,这种 satisfaction-adoption gap 历史上有时会突破(Vue 早期类似)有时不会(Backbone 永远卡死)。说不清楚这事儿。🔴 low
  • 个人开发者用 Next.js 是不是 overkill——这是业界长期争议。Next.js 现在 64% 新企业项目是事实8,但企业项目的复杂度跟个人项目天差地别。我倾向"个人小项目优先 Astro 或纯 Vite + React",但说实话每个人需求不一样。
引用

Sources

  1. MDN Web Docs — JavaScript Overview — https://developer.mozilla.org/en-US/docs/Web/JavaScript
  2. Stack Overflow Developer Survey 2025 — TypeScript 使用率与满意度数据 — https://survey.stackoverflow.co/2025/
  3. GitHub Octoverse 2025 — TypeScript 进入语言前三与贡献者增长率 — https://octoverse.github.com/
  4. State of JavaScript 2025 — Libraries / 框架使用率与满意度 — https://2025.stateofjs.com/en-US/libraries/
  5. Vite vs Webpack 2026 Showdown — PkgPulse — https://www.pkgpulse.com/blog/vite-vs-webpack-2026
  6. Turbopack vs Vite 2026 — PkgPulse — https://www.pkgpulse.com/guides/turbopack-vs-vite-2026
  7. ShadCN UI Handbook 2026 Edition — https://shadcnspace.com/blog/shadcn-ui-handbook
  8. Web Frameworks Guide 2026 – Astro vs Next.js vs Nuxt vs Remix — Lucky Media — https://www.luckymedia.dev/insights/web-frameworks
  9. React Server Components in Production: Benefits, Pitfalls and Best Practices for 2026 — Growin — https://www.growin.com/blog/react-server-components/
相关讲稿
React 不是框架,是套思路工具够用就行,不学透实操AI Native:把 AI 当底座组织AI 会普及,Native 不会组织