前端工程化MOC
前端工程化与 AI 工程化知识索引，覆盖构建、规范、性能、Monorepo 与 AI 工作流。
#type / moc
#status / evergreen
#tech / dev / frontend / eng
🛠️ 前端工程化 MOC
前端工程化与 AI 工程化实践：构建工具、代码规范、性能优化、Monorepo 和 AI 工作流等。
🎯 快速导航
| 领域 | 入口 | 说明 |
|---|---|---|
| 构建工具 | bundling-tools | Vite/Webpack/Rollup |
| 代码规范 | setup-eslint-prettier | ESLint & Prettier |
| 性能优化 | frontend-engineering-performance-optimization | 性能优化实践 |
| Monorepo | nx-overview | Monorepo 架构 |
📦 构建工具
- bundling-tools - 前端打包工具概览
- webpack-loader-and-plugin - Loader 与 Plugin
- webpack-build-process - Webpack 打包流程
- vite-moc - Vite 构建工具
- vite-fundamentals - Vite 基础概念
- project-engineering-practice-vite - Vite 工程化实践
- rollup - Rollup 模块打包工具
- tsup - tsup 零配置 TypeScript 打包工具
- rollup-vs-tsup - Rollup 与 tsup 对比
- javascript-build-and-electron-packaging - JS 构建与 Electron 打包链路
- electron-moc - Electron 主题地图
- Babel 与 AST - Babel 如何利用 AST 进行代码转换
- 代码分割 - 路由级、组件级、功能级拆分
- Tree Shaking - 消除未引用代码，减少 bundle 体积
📐 代码规范
- setup-eslint-prettier - ESLint & Prettier 配置
- TypeScript 中的 import type 与普通 import - 类型导入边界
📊 数据与观测
- 前端埋点工程化 - 埋点从事件建模到治理的完整主线
- 埋点 - 埋点是什么，以及它和指标、监控的边界
- 埋点事件模型 - 事件结构、命名和上下文设计
- 页面浏览埋点 - MPA 与 SPA 下的
page_view口径 - 曝光埋点 - 可见性判定、停留阈值和去重口径
- 前端埋点 SDK - 采集、排队、上报、重试
- 埋点数据质量与治理 - schema、类型、字典、测试与废弃管理
- 性能监控体系 - RUM、实验室数据与业务埋点联动
⚡ 性能优化
- 前端性能优化 MOC - 性能优化知识地图
- 前端性能优化分层框架 - 6 大层级体系
- 前端性能优化常见误区 - 常见误区总结
- frontend-engineering-performance-optimization - 性能优化策略
- frontend-engineering-1 - 工程化基础
- 客户端渲染（CSR） - 浏览器侧生成内容的应用型渲染方式
- 服务端渲染（SSR） - 请求时生成 HTML 的首屏直出方式
- 静态站点生成（SSG） - 构建期生成 HTML 的分发方式
- Pagefind - 面向 SSG 的开源客户端搜索引擎，基于倒排索引和分片实现低带宽搜索
- 倒排索引 - 全文搜索引擎的核心数据模型，以词条为键映射到文档列表
- 索引分片 - 将大索引切分为小分片，按需下载命中的分片
- csr-ssr-ssg - 渲染模式的对比与选型入口
- hydration - 首屏直出后的客户端接管
- first-paint-vs-time-to-interactive - 可见时间与可交互时间
- browser-rendering-process - 浏览器渲染链路与布局/绘制成本
- 浏览器缓存体系 - 浏览器缓存总入口
- Service Worker 与 Cache API - 可编程缓存与离线能力
- ai-chat-performance-optimization - AI 对话场景的前端性能优化
- ai-frontend-monitoring-metrics - AI 业务前端监控指标
- 关键路径优化 - preload、preconnect、dns-prefetch
- 资源压缩 - gzip、brotli、图片格式选型
- 缓存失效与部署策略 - 内容哈希文件名与部署顺序
- CDN 加速 - 内容分发网络
- 合成层动画 - transform、opacity 优先，GPU 合成层
- 浏览器域名分片 - 多域名策略绕过并发限制
- 白屏问题诊断 - 白屏排查路径
- 页面跳转速度优化 - 页面跳转性能优化
- 性能预算 - 项目性能指标阈值
- 首字节时间 TTFB - 服务端响应速度判断
📁 大文件传输
- large-file-transfer-system-design - 大文件传输系统设计（关系笔记）
- large-file-upload-overview - 大文件传输概述
- frontend-file-chunk-upload - 前端切片与并发控制
- backend-upload-state-management - 后端状态管理与分块合并
- resumable-upload-mechanism - 断点续传机制
- instant-upload-mechanism - 秒传机制
- file-integrity-verification - 完整性校验
- frontend-hash-calculation-strategy - 前端哈希计算策略
- large-file-download-range-request - 大文件下载与 Range 请求
- large-file-upload-engineering-challenges - 工程难点与最佳实践
- uppy - Uppy 上传框架
- tus - tus 断点续传协议
🤖 AI 工程化
- how-to-understand-ai-frontend-engineer-role-interview-question - AI 前端工程师的角色定位
- how-to-use-ai-for-frontend-interview-question - 如何用 AI 辅助前端开发
- what-tasks-is-ai-good-at-in-frontend-interview-question - AI 更适合哪些前端任务
- what-is-agent-in-frontend-engineering-interview-question - Agent 在前端研发里的定位
- ai-assisted-frontend-development-workflow - AI 辅助前端开发闭环
- ai-code-review-and-refactoring - AICR 与 AI 重构
- ai-ability-and-protocol - AI 能力来源与工具协议分层
- ai-engineering-assets-for-frontend-team - 前端团队的 AI 工程资产
- ai-chat-and-streaming-ui - AI 对话产品的流式界面模型
- ai-chat-page - AI 对话页面实现要点
- frontend-leaning-fullstack-ai-agent-engineer - 全栈偏前端的 AI Agent 岗位画像与技能栈
- frontend-streaming-response-patterns - 流式响应方案与边界
- ai-product-frontend-reliability - AI 业务前端稳定性
- ai-output-uncertainty-and-ux - AI 输出不确定性与交互设计
- ai-chat-performance-optimization - AI 对话场景性能优化
- ai-frontend-monitoring-metrics - AI 前端监控指标
- ai-web-engineer-project-storytelling - AI 前端岗位项目表达
🏗️ Monorepo 架构
- Nx + pnpm Monorepo 工作区 - pnpm workspace + Nx 任务编排实战配置
- nx-overview - Nx Monorepo 工具
- turborepo - Turborepo 高性能构建系统
- nx-configuration-complete-guide - Nx 完整配置
- nx-cloud-configuration - Nx Cloud 远程缓存
- nx-tutorial-demo-walkthrough - Nx 实践记录
- nx-project-cross-package-tsc-updates - 跨包更新配置
- library-js-bundling-and-dts-generation-layering - JS 打包与 DTS 分层
- monorepo-tsconfig-best-practices - TypeScript 配置实践
- typescript-monorepo-source-and-build-references - 开发时源码、构建时产物
- monorepo-static-assets-best-practices - 静态资源处理
📂 项目组织
- React Feature-Based 目录结构 - 按业务功能组织前端目录
🗂️ 状态管理与 UI
- Zustand 全局状态管理 - 轻量级客户端状态（认证、UI 状态）
- TanStack Query 服务端状态 - API 数据缓存与自动刷新
- 前端 SSE 消消费 - fetch + ReadableStream 消费 SSE 流式消息
- AI Chat UI 与 assistant-ui - AI 聊天专用 UI 组件
- shadcn/ui 组件库 - 源码复制式组件库
- React Router 7 路由与权限 - SPA 路由与 ProtectedRoute
🧪 测试工具
- 测试驱动开发 MOC - TDD 主题入口
- vitest-in-dailyuse - Vitest 项目实践
- tdd-workflow - 测试驱动开发工作流
- Storybook - UI 组件开发与测试工作空间
🔄 CI/CD 与自动化
- github-actions - GitHub 持续集成/持续部署
- husky-lint-staged - Git 提交前自动检查
- setup-eslint-prettier - ESLint & Prettier 配置
🔧 问题排查
- 浏览器开发者工具 MOC - DevTools 面板、专项调试与排障路径
- 浏览器开发者工具 - 浏览器调试与性能诊断
- uuid-install-electron-error - UUID 与 Electron 冲突问题
- electron-project-issues - Electron 项目问题汇总
- pagedjs 页面边界 DOM 不稳定性 - pagedjs 分页渲染问题
📋 开发流程与工具
- 前端开发流程 - 日常前端开发流程记录
- 图表导出到 Excel - 图表导出与 Excel 集成
- WebRTC Data Channels - WebRTC 数据通道
📱 移动端开发
- android-development-environment-setup - Android 开发环境配置总入口
- android-sdk - Android SDK 组件与管理
- android-platform-tools - Platform Tools（ADB / Fastboot）
- adb - ADB 调试桥命令手册
- react-native - React Native 跨平台框架
- React Native 入门 - React Native 跨平台框架介绍
- expo - Expo 开发平台与工作流
- eas - EAS 云端打包、上架与热更新
- Hybrid 应用 - WebView 与原生能力组合的跨端方案
- 小程序滚动穿透 - 弹层滚动穿透问题
🔗 相关 MOC
- frontend-interview-high-frequency-moc - 前端高频面试题导航
面试要点
来自 vite-vs-webpack-speed-interview-question 的面试视角整理。
一句话回答
Vite 在开发环境通常更快，核心原因是它利用浏览器原生 ESModule，避免像传统打包工具那样在启动时先把整个项目打成一个大包。
最稳的回答主线
开发环境为什么快
- 不需要冷启动时整体打包
- 浏览器按需请求模块
- 热更新粒度更细
生产环境不是“不打包”
Vite 在生产构建时通常还是会交给 Rollup 做打包优化。
面试常见追问
那为什么 Webpack 慢
传统模式下，开发环境也经常先做整体依赖图构建和打包，项目大时冷启动和热更新成本更高。
Vite 是不是任何场景都更好
不一定。工程复杂度、插件生态、历史项目兼容和团队习惯也会影响选择。
最短记忆方式
Vite 开发更快，关键在于“开发时尽量不先整体打包”。