工程化

前端工程化体系，包括构建、测试、性能、监控、安全、容器化等。

📚 模块列表

构建工具

Webpack
- 核心概念（Entry、Output、Loader、Plugin）
- 构建流程与原理
- 性能优化（缓存、并行、Tree Shaking）
- 热更新（HMR）原理
Vite
- 基于 ESM 的开发服务器
- Rollup 生产构建
- 插件系统
- 与 Webpack 对比
其他工具
- Babel 转译原理
- Monorepo 管理（pnpm、Turborepo）
- 微前端架构（qiankun、Module Federation）
- WebAssembly 实践

测试

单元测试（Jest、Vitest）
组件测试（React Testing Library）
E2E 测试（Playwright、Cypress）
TDD 测试驱动开发

性能优化

性能指标（FCP、LCP、CLS、TTI）
性能分析工具（Lighthouse、DevTools）
首屏优化（SSR、预渲染、骨架屏）
资源加载优化（懒加载、预加载、CDN）
包体积优化（Tree Shaking、代码分割）
渲染性能优化（虚拟列表、防抖节流）
JavaScript 性能优化

监控与埋点

监控体系概述
数据采集原理
JavaScript 错误监控
性能指标采集
用户行为埋点
监控 SDK 设计

安全

XSS 跨站脚本攻击
CSRF 跨站请求伪造
点击劫持
HTTPS 原理
内容安全策略（CSP）
Cookie 安全
JWT 认证
安全检查清单

容器化

Docker 核心概念
镜像构建与优化
容器网络与存储
Docker Compose 编排
多阶段构建
安全实践

🎯 学习路径

构建工具 → Webpack/Vite 原理
测试 → 单元测试、E2E 测试
性能优化 → 指标、分析、优化
监控 → 错误监控、性能监控
安全 → 常见攻击与防护
容器化 → Docker 部署

💡 学习建议

工程化是高级前端的必备能力
性能优化需要理论结合实践
监控体系是线上稳定性的保障
安全意识贯穿开发全流程
容器化是现代部署的标准