posts

专题三：前端工程化与性能优化

前端工程化是保障大型项目可维护性与团队协作效率的系统性方法论。本专题从工程化体系出发，系统覆盖代码规范与 ESLint/Prettier 配置、Monorepo 架构与 pnpm workspace、Vite/Webpack/esbuild 构建工具深度解析、CI/CD 自动化流水线、Web 性能全栈优化（Core Web Vitals、RUM 真实用户监控、资源加载策略、图片/字体/代码分割优化）、浏览器缓存与 CDN 配置、Web 安全（CSP/CORS/XSS 防护）、前端测试（单元测试/E2E/视觉回归）、可访问性 a11y 与 PWA 渐进式 Web 应用，以及 Vue/React/Next.js/Astro 等框架的工程化最佳实践，打造企业级前端交付能力。

「工程化」不是某个工具，而是一整套交付标准：从代码提交到部署上线，每一环都有质量保障。

专题三覆盖前端工程化与性能优化的全链路，目标是建立企业级前端交付能力。内容包括：工程化体系、构建工具、CSS/TypeScript 标准化、Web 性能全栈优化、测认与安全、微前端与 PWA 等前沿方向。

专题总体规划

本专题共 14 篇深度文章（含聚合页），分为三个阶段：

阶段一：工程化体系（基础）

#文章学习目标
1前端工程化全景：从代码规范到 CI/CD掌握 Monorepo、ESLint/Prettier、Husky、标准化 CI/CD 流程与分支模型
2CSS 工程化体系：Tailwind 原子化到设计令牌理解原子化 CSS、设计令牌、PostCSS 插件链与主题系统
3TypeScript 工程化实战：类型安全至架构进阶类型体操、严格模式配置、类型安全边界与架构设计
-React 构建工具深度对比react-build-tools-guide（已有）

阶段一重点：让代码仓库从「能跑」变成「可维护、可扩展、可协作」。

阶段二：性能优化（核心）

#文章学习目标
4Web 性能指标全解析：Core Web Vitals 与 RUM理解 LCP/FID/CLS、真实用户监控（RUM）与性能基线
5Web 资源加载深度优化：图片/字体/视频/缓存掌握资源压缩、格式选择、懒加载、HTTP 缓存策略与 CDN 部署
6前端状态管理全景对比与选型指南对比 Redux/Zustand/Jotai/Valtio/Pinia/Vuex，按场景选型
-React 性能优化深度指南react-performance-optimization（已有）
-CDN 缓存规则实战cloudflare-cdn-cache-rules（已有）

阶段二重点：用数据驱动优化，建立「指标 → 定位 → 修复 → 验证」的闭环。

阶段三：架构与前沿（进阶）

#文章学习目标
7微前端与模块联邦：架构设计与落地理解微前端边界、Module Federation、qiankun/single-spa 选型与实战
8前端测试策略：单元、E2E、视觉回归与验收建立测试金字塔，掌握 Jest/Vitest、Cypress/Playwright、Storybook VRT
9PWA 与 Service Worker：离线化与服务扩展掌握 Service Worker 生命周期、缓存策略、Background Sync、Push 通知
10Web 可访问性（a11y）：合规与体验理解 WCAG 标准、语义化 HTML、ARIA、焦点管理与辅助技术
11前端安全进阶：XSS、CSP、SRI 与供应链掌握 XSS 全分类防护、CSP 策略、SRI 校验、依赖安全扫描（Snyk/npm audit）
12现代浏览器 API 与 Web 平台能力地图系统梳理现代浏览器能力：Intersection Observer、Web Workers、Storage API、Web Share 等
13WebAssembly 前端工程化实践理解 WASM 编译流程、与 JS 互操作、性能对比、工具链（Rust/wasm-pack/emscripten）
14API 设计与 BFF 层：REST、GraphQL、tRPC 选型对比 API 范式，掌握 tRPC/BFF 层设计与前后端协作模式

阶段三重点：从单一应用视角扩展到「前端即架构」，关注安全、可访问性、跨团队协作与前沿能力。

前置知识

学习路径建议

路线 A：Vue / Nuxt 生态
代码规范 → CSS 工程化 → TS 进阶 → 性能指标 → 资源优化 → Pinia 状态管理 → Vue/Nuxt 性能调优 → 测试策略 → PWA

路线 B：React / Next.js 生态
代码规范 → CSS 工程化 → TS 进阶 → 性能指标 → 资源优化 → Zustand/Jotai 状态管理 → React/Next.js 性能调优 → 微前端 → 测试策略

路线 C：全栈/架构方向
工程化全景 → 性能全栈 → 状态管理 → 微前端 → API 设计/BFF → 前端安全 → 监控体系

快速索引

性能优化

安全

框架专题

相关专题

专题说明路径
专题一：大数据与消息队列Kafka 深度系列content/posts/kafka/_index.md
专题二：Kubernetes 云原生K8s 全栈与 CNCFcontent/posts/kubernetes/_index.md
专题四：云原生可观测性Prometheus/Grafana/Observability规划中
全部文章 game golang 客户端开发 Minigame Saas Indie rust Python Java cg
frontend

API 设计与 BFF 层：REST、GraphQL、tRPC 选型与前后端协作

系统性 API 设计与 BFF（Backend for Frontend）实践：RESTful API 设计规范（HTTP 方法/状态码/资源命名/分页/版本控制）、HATEOAS、OpenAPI 规范与自动化（生成客户端/文档/Mock）、GraphQL 类型系统与查询优化（N+1/DataLoader/缓存）、tRPC 端到端类型安全、tRPC 路由与中间件、BFF 架构设计（职责边界/API 聚合/权限转发）、前后端协作模式（契约测试/API First/Mock Server）、API 版本化策略与平滑迁移、gRPC-Web 在浏览器场景的应用。附 Node.js/Go 实战。

5 分钟阅读
API Design REST GraphQL
frontend

WebAssembly 前端工程化实践：编译链、性能对比与混合架构

系统性 WebAssembly 前端实战：WASM 核心概念与运行模型（VM/线性内存/Table/Module/Instance）、主流编译工具链对比（Rust+wasm-pack / Go+wasm / C++/Emscripten / AssemblyScript）、WASM 与 JavaScript 互操作（export/import/memory/Table）、性能基准对比（WASM vs JS vs native）、前端典型应用场景（图像处理/编解码/加密/物理引擎/数据可视化）、WASM 模块异步加载与流式编译、多线程 WASM（SharedArrayBuffer + Atomics）、WASI（WebAssembly System Interface）演进。附 Rust→WASM 完整实战。

5 分钟阅读
WebAssembly Rust 性能优化
frontend

现代浏览器 API 与 Web 平台能力地图

系统性梳理现代浏览器原生 API 能力地图：Web Workers / Shared Workers 多线程计算、IndexedDB / Cache API / Storage API 客户端存储、Intersection Observer / Resize Observer / Mutation Observer 布局观测、Web Share / Web Share Target / Contact Picker 社交集成、Clipboard API / File System Access / Drag & Drop 数据交互、Web Bluetooth / Web NFC / Web Serial / Web HID / Web USB 硬件连接、Web Speech / Web Audio / MediaRecorder 多媒体、Payment Request / Credential Management 身份与支付、BroadcastChannel / Beacon / Reporting API 页面通信与报告。

6 分钟阅读
JavaScript advanced
frontend

前端安全进阶：XSS、CSP、SRI 与供应链安全

系统性前端安全深度指南：XSS 全分类（Reflected/Stored/DOM-based/mXSS）与防御矩阵（转义/CSP/DOMPurify/Trusted Types）、CSP（Content Security Policy）策略设计与部署、SRI（Subresource Integrity）校验、CSRF Token 与 SameSite Cookie、前端加密与密钥管理、npm 供应链安全（package-lock/audit/SBOM/openSSF Scorecard）、原型污染防御、eval/new Function 沙箱替代方案、浏览器安全头全览。附 Vue/React/Next.js 安全配置。

5 分钟阅读
安全 XSS CSP
frontend

Web 可访问性（a11y）：合规标准、技术实现与用户体验

系统性 Web 可访问性指南：WCAG 2.1/2.2 标准解读（感知性/可操作性/可理解性/健壮性四大原则）、语义化 HTML 与 ARIA 正确使用、键盘导航与焦点管理、屏幕阅读器兼容（NVDA/JAWS/VoiceOver）、色彩对比度与色觉障碍、减少动态内容（prefers-reduced-motion）、表单可访问性、可访问性测试工具（axe-Core/Lighthouse/pa11y）、法律合规（ADA/EN 301 549/中国无障碍环境建设法）。附 Vue/React 实战代码。

9 分钟阅读
a11y accessibility wcag
frontend

PWA 与 Service Worker：离线化、缓存策略与服务扩展

系统性 PWA 实战指南：Service Worker 注册与生命周期（install/activate/fetch）、缓存策略（Cache-First/Network-First/Stale-While-Revalidate/Cache-Only/Network-Only）、Workbox 自动化缓存、Background Sync、Push 通知、Web App Manifest、Add to Home Screen（A2HS）、Service Worker 更新机制与版本控制、PWA 与 SPA/SSR 结合。附 Vue/React/Next.js 完整配置。

7 分钟阅读
PWA offline Cache
frontend

前端测试策略：单元、E2E、视觉回归与验收测试

系统性前端测试体系建设：测试金字塔分层（单元/集成/E2E）、Vitest/Jest 单元测试实战、Vue Test Utils / React Testing Library 组件测试、MSW（Mock Service Worker）API 模拟、Cypress / Playwright E2E 对比、组件文档与测试结合（Storybook Interaction Tests）、视觉回归测试（Chromatic / Percy）、性能基准测试（Lighthouse CI）、测试覆盖率门禁与 CI 集成、TDD/BDD 实践模式。

6 分钟阅读
测试 Vitest cypress
frontend

微前端与模块联邦：架构设计与落地实战

系统性微前端技术指南：微前端架构模式（Module Federation / iframe / Web Components / qiankun / single-spa）选型对比、Webpack Module Federation 原理与配置、Vite Module Federation（@originjs/vite-plugin-federation）实战、公共依赖共享与版本冲突解决、跨应用通信、路由整合、样式隔离、qiankun 沙箱与快速启动、微前端 DevOps 与独立部署。附完整架构决策树。

6 分钟阅读
架构设计 Webpack Vite
frontend

Web 资源加载深度优化：图片、字体、视频、缓存与 CDN

系统性 Web 资源加载优化策略：图片格式选型（AVIF/WebP/JPEG XL）、响应式图片（srcset/sizes/picture）、懒加载（loading='lazy' + Intersection Observer）、字体加载策略（font-display/preload/subset）、视频与 iframe 懒加载、HTTP 缓存策略（Cache-Control/ETag/Last-Modified）、Service Worker 缓存、CDN 边缘加速与缓存规则、资源压缩（Brotli/Gzip）、HTTP/2 Server Push 替代方案（103 Early Hints/Preload）、关键渲染路径优化。

6 分钟阅读
性能优化 optimization caching
frontend

TypeScript 工程化实战：从类型体操到架构安全

系统性 TypeScript 工程化指南：tsconfig 严格模式配置、高级类型体操（条件类型、映射类型、模板字面量、infer）、类型守卫与 Narrowing、泛型约束与协变逆变、类型安全边界（noUncheckedIndexedAccess、exactOptionalPropertyTypes）、monorepo 类型共享、API 类型自动同步（OpenAPI → TS）、品牌类型（Branded Types）与名义类型系统。附 Vue/React/Node.js 实战配置。

7 分钟阅读
TypeScript engineering vue