面向：中高级前端 / 架构师
覆盖：构建工具 → 应用架构 → 渲染模式 → 工程化体系
一、整体认知框架（先建立全局观）
前端工程其实可以拆成三层：
对应关系：
| 层级 | 解决问题 | 核心工具 |
|---|---|---|
| 构建层 | 怎么编译代码 | Vite / Rsbuild |
| 架构层 | 怎么组织应用 | Monorepo / 微前端 |
| 渲染层 | 怎么展示页面 | CSR / SSR / SSG |
二、构建层（Build Layer）
主流工具体系
Vite
-
开发体验最优（ESM + HMR）
-
适合：中小项目 / SPA
Rsbuild
-
基于 Rspack
-
高性能 + 企业级
Webpack
- 老牌但仍在大量项目中存在
Rollup
- 库构建最优（tree-shaking 强）
esbuild
- 构建性能引擎
构建层核心能力
必须掌握这几个能力
-
Bundle（打包）
-
Tree-shaking（去无用代码）
-
Code Splitting（代码分割）
-
HMR（热更新）
-
Transpile（转译）
构建层趋势（关键）
三大趋势：
-
ESM 原生化（Vite）
-
Rust 化（Rspack / Turbopack）
-
工具集成化（框架内置构建）
三、应用架构层（Architecture Layer）
SPA 架构（最基础）
单页面应用（SPA）
特点：
-
前端路由
-
前后端分离
适合：
- 管理系统
Monorepo（企业基础设施）
单仓库多应用
工具：
- Turborepo / Nx
结构示例：
apps/
a/
b/
packages/
ui/
utils/优势：
-
代码复用
-
统一依赖
-
CI/CD 优化
微前端（Micro Frontend）
多团队协作核心方案
核心思想：
把前端拆成多个独立应用
常见方案：
-
iframe（简单但差）
-
Module Federation（主流）
-
single-spa
Webpack / Rspack 支持最好
BFF（Backend For Frontend）
前端专属后端层
作用：
-
聚合 API
-
权限控制
-
降低前端复杂度
RBAC 权限模型（你正在用）
Role-Based Access Control
核心表：
User
Role
Permission四、渲染模式层（Rendering Layer）
这是很多人最模糊但最关键的一层
CSR（Client-Side Rendering）
客户端渲染
流程：
浏览器 → 下载 JS → 渲染页面特点：
-
首屏慢
-
交互快
适合：
- 管理系统
SSR（Server-Side Rendering）
服务端渲染
流程：
服务器生成 HTML → 浏览器直接展示特点：
-
首屏快
-
SEO 好
代表：
- Next.js
SSG（Static Site Generation）
静态生成
流程：
构建时生成 HTML特点：
-
极致性能
-
CDN 分发
适合：
- 官网 / 文档站
ISR（增量静态生成）
SSG + 动态更新
Next.js 提供
渲染模式对比
| 模式 | 首屏 | SEO | 复杂度 |
|---|---|---|---|
| CSR | ❌ | ❌ | ⭐ |
| SSR | ✅ | ✅ | ⭐⭐⭐ |
| SSG | ✅ | ✅ | ⭐⭐ |
五、构建 × 架构 × 渲染 的组合关系（核心）
这是最重要的一张图
六、典型架构组合（实战）
方案1
Vite + React
SPA
Monorepo
CSR适合：
- 管理系统
方案2（企业升级版）
Rsbuild + React
微前端
Monorepo
CSR方案3（平台 + SEO）
Next.js
SSR + ISR
BFF方案4（官网）
VitePress / Astro
SSG
CDN七、终极总结（架构思维）
记住这三句话：
