前端工程化MOC

前端工程化与 AI 工程化知识索引，覆盖构建、规范、性能、Monorepo 与 AI 工作流。

#moc #evergreen #eng

🛠️ 前端工程化 MOC

知识总览

filters:
  and:
    - 'file.ext == "md"'
    - 'file.inFolder("z")'
    - 'this.file.links.contains(file)'
    - 'file.path != this.file.path'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: 知识总览
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

前端工程化与 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 - 可见时间与可交互时间
浏览器渲染流程 - 浏览器渲染链路与布局/绘制成本
浏览器缓存体系 - 浏览器缓存总入口
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 工程化

你怎么理解 AI 前端工程师 - AI 前端工程师的角色定位
你怎么用 AI 辅助前端开发 - 如何用 AI 辅助前端开发
AI 更适合哪些前端任务 - AI 更适合哪些前端任务
Agent 在前端研发里是什么 - Agent 在前端研发里的定位
AI 辅助前端开发工作流 - AI 辅助前端开发闭环
ai-code-review-and-refactoring - AICR 与 AI 重构
AI 能力与协议 - AI 能力来源与工具协议分层
ai-engineering-assets-for-frontend-team - 前端团队的 AI 工程资产
AI 聊天与流式 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 知识地图 - TanStack Query 专题索引（20 篇）
- TanStack Query 起源与概述 - 历史背景与核心定位
- 服务端状态管理 - useQuery / useMutation 基础用法
- 缓存失效模式 - cancelQueries / setQueryData / removeQueries / invalidateQueries
- 分页与无限滚动 - useInfiniteQuery 实战
- 与 SSE 流式数据集成 - 流式场景协调
- 从 useState 迁移 - 增量迁移四步策略
四层状态架构 - URL / Query / Streaming / UI 四层分工
组件内服务端状态与客户端状态的区分
URL 作为唯一身份源
派生状态模式
前端 SSE 消消费 - fetch + ReadableStream 消费 SSE 流式消息
TanStack Query 与 SSE 流式数据集成 - 流式场景下 Query cache 与 SSE 的协调
React Router Data Router 数据加载模式 - loader / action / 自动重新验证
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 冲突问题
blogs/dailyuse-electron-esm-native-module-debug - 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 比 Webpack 快的面试视角整理。

一句话回答

Vite 在开发环境通常更快，核心原因是它利用浏览器原生 ESModule，避免像传统打包工具那样在启动时先把整个项目打成一个大包。

最稳的回答主线

开发环境为什么快

不需要冷启动时整体打包
浏览器按需请求模块
热更新粒度更细

生产环境不是“不打包”

Vite 在生产构建时通常还是会交给 Rollup 做打包优化。

面试常见追问

那为什么 Webpack 慢

传统模式下，开发环境也经常先做整体依赖图构建和打包，项目大时冷启动和热更新成本更高。

Vite 是不是任何场景都更好

不一定。工程复杂度、插件生态、历史项目兼容和团队习惯也会影响选择。

最短记忆方式

Vite 开发更快，关键在于“开发时尽量不先整体打包”。