首页  |  学习总览  |  ← 返回专题总览 进阶专题 01 · 认知框架

大前端全景导论

从「会写页面」到「看懂大前端版图」—— 你正在学习的不是某个框架,而是一整张地图
学习时长:约 8 小时 | 前置:完成十阶段手册 | 产出:画出你自己的能力地图

一、什么是「大前端」

大前端(Great Frontend / Full-frontend) 不是一个技术,而是一种工程视角:以用户体验为起点,把「浏览器、移动端、桌面端、小程序、服务端渲染、甚至 AI 应用」全部纳入前端工程师的能力边界。

过去:前端 = HTML/CSS/JS 写网页。现在:前端 = 任何用户能直接看到的界面及其背后的架构

1. 演进史:四个阶段看明白

① 静态网页时代
HTML 模板 + 后端渲染
② 动态交互时代
jQuery + Ajax
③ SPA 应用时代
React/Vue + 前端路由 + 工程化
④ 大前端时代
SSR/BFF/跨端/AI + 云原生

2. 大前端能力版图(六边形战士)

🎨 Web 端

React / Vue / 工程化 / 性能 / 可视化(Canvas/WebGL)/ 微前端

📱 跨端

小程序(微信/支付宝/抖音)/ React Native / Flutter / Taro / uni-app / 鸿蒙 ArkTS

⚙️ 服务端

Node.js / NestJS / SSR / BFF / GraphQL / Serverless / 微服务协作

🏗 工程化

构建(Vite/Webpack)/ CI/CD / 监控 / 质量(测试/Lint)/ Monorepo

📊 数据与体验

数据可视化 / 埋点分析 / 性能指标(Web Vitals)/ 可访问性 a11y / 动效

🤖 AI 融合

LLM 接入 / 提示词工程 / RAG 应用 / Agent UI / AI 生成代码与 UI / MCP

二、架构演进路线:从单体到云原生

架构形态核心特征典型问题进阶方向
MPA 多页应用每个页面一次请求,服务端渲染整页切换白屏、体验割裂→ SPA
SPA 单页应用前端路由 + 客户端渲染,首屏后无刷新首屏慢、SEO 差→ SSR / SSG
SSR/同构同一套代码服务端渲染 + 客户端水合服务器成本、复杂度上升→ 边缘渲染(ISR)
微前端巨石拆分为独立部署的子应用隔离、通信、运维复杂度→ 模块联邦
云原生Serverless + 容器化 + 边缘计算技能要求高→ AI 原生应用

三、技术栈全景(2026 视角)

核心层

React 19 / Vue 3.5+ / TypeScript 5+ —— 语言与框架是底座,任何 UI 方案都围绕它们。

框架生态

Next.js 15 / Nuxt 3 / Remix / Vite / Tailwind CSS —— 全栈框架与样式方案。

服务端能力

Node.js 22 / NestJS / Prisma / tRPC / GraphQL —— 前端工程师的后端延伸。

工程与质量

pnpm + Turborepo / Vitest / Playwright / ESLint + Prettier / Husky + lint-staged

AI 能力

OpenAI/DeepSeek/通义 API / LangChain 生态 / RAG(向量库)/ MCP / Vercel AI SDK

跨端

Taro / uni-app / React Native / Flutter / 鸿蒙 ArkTS

四、案例解析:大厂前端团队怎么分工

背景:一家 5000 人互联网公司,前端 200 人。普通人以为 200 个前端都在写页面?错。真实的组织是这样切分的:

小组人数职责对应专题
业务前端组120核心业务(电商/内容)页面与组件阶段 01~08
基础架构组30工程化平台、脚手架、CI/CD、Monorepo阶段 04 / 09
中后台前端组20内部系统 + 低代码平台,用平台替代重复开发专题 05 🔥
体验与性能组10性能监控、设计系统、组件库阶段 07
服务端渲染组10SSR 基建、BFF 网关,前后端契约专题 02 / 03 🔥
跨端组10小程序 / RN / 桌面端一套方案跨端技术
AI 应用组10公司内部 AI 助手、Copilot、Agent 界面专题 07 🔥

解析:能成为"负责人"的人,不是业务组里写代码最久的,而是能搭建体系的人——把重复的工作平台化(低代码)、把复杂的问题架构化(微前端/SSR)、把未来的机会落地(AI)。这套专题就是按照这个逻辑设计的。

五、认知升级:工程师 vs 架构师

维度资深工程师架构师 / 负责人
关注范围一个模块 / 一个项目一条业务线 / 整个技术体系
解决问题怎么实现要不要做、用什么做、做完怎么度量
决策依据技术最优成本 / 风险 / 收益 / 团队能力平衡
交付物代码方案、规范、平台、人
沟通对象同事产品 / 后端 / 老板 / 跨团队
核心能力编码深度架构设计 + 技术判断 + 影响力

六、专题通关自检题

Q1:用一句话向非技术同事解释「大前端」。
展开答案
"前端工程师不只负责网页,还负责所有用户看到的界面,以及背后的性能、架构和智能化,让产品又快又稳又聪明。"
Q2:架构演进 MPA → SPA → SSR → 微前端,每一步为了解决什么问题?
展开答案
MPA 白屏切换 → SPA 提升体验但首屏/SEO 差 → SSR 解决首屏与 SEO 但巨石难维护 → 微前端解决巨石拆分与多团队并行。
Q3:大前端六边形能力分别是什么?你当前短板在哪两块?
展开答案
Web / 跨端 / 服务端 / 工程化 / 数据体验 / AI。对照自己画一张能力图,短板就是下一个专题的起点。
Q4:为什么公司里最值钱的前端不是"写代码最久的"?
展开答案
因为写代码只是执行力,搭建体系(平台化/架构化/智能化)才能放大团队产能,那是负责人的价值所在。