为什么说 AI 时代，前端开发者对前端工程化的要求更高了❓❓❓

main        # 生产环境分支

develop     # 开发集成分支

feature/*   # 功能分支

release/*   # 发布准备分支

hotfix/*    # 线上紧急修复分支

<type>(<scope>): <subject>

feat(login): 添加用户登录功能

fix(api): 修复接口返回字段错误

docs(readme): 完善项目使用说明

src/

├── assets/        # 静态资源（图片、字体等）

├── components/    # 可复用的基础组件

├── pages/         # 页面级组件

├── services/      # API 请求模块

├── utils/         # 工具函数

├── hooks/         # 自定义 hooks（React 项目）

├── styles/        # 全局样式

├── config/        # 配置文件（如常量、环境变量）

├── router/        # 路由配置

├── store/         # 状态管理（如 Vuex / Redux）

└── main.ts        # 应用入口

Push → 检查代码规范 → 构建 → 运行测试 → 上传产物 → 通知部署 → 上线

name: Deploy Next.js to Alibaba Cloud ECS

on:
push:
branches:
- main

jobs:
deploy:
runs-on: ubuntu-latest

steps:
- name: Checkout code
uses: actions/checkout@v4.2.0

- name: Set up Node.js
uses: actions/setup-node@v4.2.0
with:
node-version: "22.11.0"

- name: Install pnpm
run: npm install -g pnpm@9.4.0

- name: Deploy to server via SSH
uses: appleboy/ssh-action@v1.2.1
with:
host: ${{ secrets.SERVER_HOST }}
username: ${{ secrets.SERVER_USERNAME }}
port: ${{ secrets.SERVER_PORT }}
password: ${{ secrets.SERVER_PASSWORD }}
script: |

            # 显示当前环境信息

            echo "Shell: $SHELL"

            echo "PATH before: $PATH"

# 加载环境配置文件
source ~/.bashrc
source ~/.profile

# 如果使用 NVM，加载 NVM 环境
export NVM_DIR="$HOME/.nvm"

            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# 添加常见的 Node.js 安装路径到 PATH
export PATH="$HOME/.nvm/versions/node/*/bin:/usr/local/bin:/usr/bin:/bin:$HOME/.npm-global/bin:$PATH"
echo "PATH after: $PATH"

# 查找 npm 的位置
which npm || echo "npm still not found in PATH"

# 使用绝对路径查找 npm
NPM_PATH=$(find /usr -name npm -type f 2>/dev/null | head -1)
if [ -n "$NPM_PATH" ]; then
echo "Found npm at: $NPM_PATH"
export PATH="$(dirname $NPM_PATH):$PATH"
fi

# 确保目标目录存在
mkdir -p /home/interview-guide
cd /home/interview-guide

# 如果本地仓库不存在，进行克隆
if [ ! -d "/home/interview-guide/.git" ]; then
echo "Cloning the repository..."
# 删除可能存在的空目录内容
rm -rf /home/interview-guide/*
# 使用 SSH 方式克隆
git clone git@github.com:xun082/interview-guide.git .
else
# 确保远程 URL 使用 SSH
git remote set-url origin git@github.com:xun082/interview-guide.git
# 获取最新代码
git fetch origin main
git reset --hard origin/main
fi

# 使用找到的 npm 路径或尝试直接运行
if [ -n "$NPM_PATH" ]; then
$NPM_PATH install -g pnpm@9.4.0
$NPM_PATH install -g pm2
else
npm install -g pnpm@9.4.0
npm install -g pm2
fi

# 安装依赖
pnpm install || npm install

# 构建项目
pnpm run build || npm run build

# 重启应用
pm2 restart interview-guide || pm2 start "pnpm start" --name interview-guide || pm2 start "npm start" --name interview-guide

建议：根据数据类型区分时机，错误即时上报、性能延迟上报、行为数据可批量处理。

3. 
   
4. 上报频率控制（防抖 / 节流 / 采样）
   
   • 
     
   • 错误或点击频繁时可能产生大量上报请求
     
   • 需要加防抖、节流机制，或采样上报（如只上报 10% 用户）
     
   
   
   

🔍 建议：对于高频行为（如滚动、点击），加防抖或只上报部分用户行为，避免拖垮前端或服务端。

4. 
   
5. 异常处理与重试机制：遇到网络断开、后端失败等应支持自动重试或本地缓存，可将数据暂存至 localStorage，等网络恢复后重发
   
6. 数据结构设计：统一字段格式、数据类型，方便服务端解析，包含上下文信息：页面 URL、用户 ID、浏览器信息、时间戳等，如下所示：
   

{
"type": "error",
"event": "ReferenceError",
"message": "xxx is not defined",
"timestamp": 1716280000000,
"userId": "abc123",
"url": "https://example.com/home"
}

总的来说，数据上报是前端监控的核心环节，但只有在合适的时机，用合适的方式，上报合适的数据，才能真正发挥价值。

SEO

传统 SEO 更适配 静态页面（HTML 内容直接可读），而现代前端多采用 JS 渲染（如 SPA），搜索引擎可能无法及时抓取内容。

所以工程化的目标是解决这两者之间的冲突 —— 既要享受前端框架带来的开发体验，又要兼顾 SEO 可见性。

首先第一个考虑的问题是技术栈的选型，我们要选择合适的渲染方式：

🔍 建议：若对 SEO 要求高，优先使用 SSR 或 SSG（如用 Next.js / Nuxt），工程化框架已内置支持。

结合工程化工具，我们可以对 SEO 进行自动化检验：

例如：CI/CD 阶段跑 Lighthouse 检查分数，不达标就打回构建。

在前端工程化的环境下，SEO 是一项“构建可被搜索引擎消费的前端工程能力”，它从渲染模式、构建配置、自动化校验到部署策略，都是一套系统工程。

这些是我的一个具体实践的效果，虽然还不是很好，但是最起码也是有能在网页上搜到了，要优化也可以慢慢去优化：

前端脚手架

前端脚手架（Scaffolding Tool）是一种用于快速初始化前端项目、统一工程结构和配置的自动化工具，通常以命令行工具（CLI）的形式存在。它帮助开发者在几秒钟内搭建一个带有规范目录、工具链配置、依赖管理等的标准化项目模板，为工程化开发打下基础。

但优秀的脚手架远不止于“搭个壳子”，它更是一种“工程平台”，具备良好的可扩展性和插件化能力，支持项目初始化、模块扩展、代码生成、规范注入、持续维护等全过程自动化操作。

前端脚手架的核心价值：

可扩展脚手架的典型能力包括：

前端脚手架是现代工程化开发的起点，它不仅帮你快速创建项目，更帮助团队建立规范、提升效率、支持扩展，是一套持续演进的开发基建工具。

性能优化

前端性能优化从宏观上可分为两个核心维度：

• 
  
• 时间角度（减少耗时）： 通过优化加载时间、渲染时间、响应时间等，提升页面的打开速度与操作响应。
  
• 空间角度（降低资源占用）： 控制内存使用、减少冗余资源、降低资源带宽占用，提升运行效率与设备适配性。
  

📚 归纳篇：优化方法的系统化分类

将前端性能优化手段进行系统化归纳，有助于从工程化、流程化的角度建立认知和治理体系，便于团队协作与策略落地。可从以下维度划分：

• 
  
• 加载优化类： 面向资源加载阶段，如压缩、合并、懒加载、预加载等。
  
• 渲染优化类： 面向浏览器绘制流程，如布局优化、图层合成。
  
• 交互优化类： 面向用户体验，如减少卡顿、帧率优化。
  
• 服务端协作类： 包括 SSR、缓存策略、接口并发控制等。
  
• 工程协作类： 包括模块拆分、构建优化、CI/CD 等。
  
• 监控诊断类： 性能埋点、数据指标体系、追踪与预警系统。
  

此分类体系有助于从流程、模块、职责上全面覆盖性能优化工作的各个方面。

🚀 加载流程篇：首屏优化与资源调度策略

核心目标：加快页面首次可见速度（FCP/LCP）

典型优化手段包括：

• 
  
• 资源压缩与合并： CSS、JS 使用 gzip/brotli 压缩，合理合并减少请求数。
  
• CDN 与多源调度： 静态资源使用 CDN 加速，提升就近加载速度。
  
• 懒加载与延迟加载： 图片/模块懒加载，减少首屏体积，加快首屏渲染。
  
• 关键资源优先级提升： 使用 <link rel="preload"> / fetchPriority 等机制标记关键资源。
  
• 服务端推送/首屏预渲染： 减少白屏时间，可搭配 SSR 使用。
  
• 骨架屏/占位图优化感知体验： 提升加载过程的“视觉反馈”。
  

🎨 渲染篇：浏览器绘制流程优化

核心目标：减少重排重绘，提升绘制效率

浏览器渲染流程包括：样式计算 → 布局 → 绘制 → 图层合成 → 显示。优化手段包括：

• 
  
• 减少 DOM 操作频率与数量： 批量处理节点更新，避免频繁修改样式。
  
• 避免同步布局触发： 避免频繁读取 layout 属性（如 offsetTop）造成强制回流。
  
• 使用硬件加速： 通过 transform、will-change 等方式开启合成层。
  
• 减少复杂选择器和嵌套结构： 提升样式计算性能。
  
• 动画优化： 使用 GPU 加速动画属性（如 transform、opacity），避免触发布局。
  

🎮 卡顿篇：流畅度与帧率优化

核心目标：保持页面在 60FPS 以上，提升交互流畅度

• 
  
• 避免长任务阻塞主线程： 将执行时间超过 50ms 的函数拆分或异步处理。
  
• 使用 requestIdleCallback / requestAnimationFrame： 在空闲或合适时机执行任务。
  
• Web Worker 解耦计算任务： 重计算、加密等耗时操作放入 Worker。
  
• 输入事件优化： 避免在触发如 scroll、click 时执行复杂逻辑。
  
• 合理设置节流/防抖机制： 防止短时间频繁触发函数执行。
  
• 性能分析工具： 利用 DevTools Performance 面板定位卡顿原因。
  

📦 容器篇：滚动与 DOM 管理性能优化

核心目标：提升页面在滚动、交互过程中的性能体验

• 
  
• 虚拟列表技术： 仅渲染可视区域元素，提升大数据量列表性能。
  
• DOM 节点管理： 避免频繁创建/销毁节点，合理复用。
  
• 滚动优化： 使用 Passive Event Listener、防止 layout 抖动。
  
• 图片延迟加载/懒加载容器： 减轻滚动时加载压力。
  
• 使用 IntersectionObserver： 替代 scroll 监听进行可视区域检测。
  

🌐 SSR 篇：服务端渲染与首屏优化

核心目标：减少首屏白屏时间、提升 SEO 能力

• 
  
• 传统 SSR + Hydration： 先服务端渲染 HTML，再客户端接管逻辑。
  
• SSG（静态生成）： 构建时生成静态页面，适用于更新频率低的页面。
  
• ISR（增量静态更新）： 动态内容在服务端预构建更新。
  
• 分块加载： 初始 HTML 精简，仅加载关键内容，其余异步加载。
  
• 数据预取策略： 服务端渲染前预获取数据，提升页面完整度。
  

🛠️ 项目管理篇：模块拆分与构建优化

核心目标：提升构建效率与模块可维护性

• 
  
• 任务分包与模块解耦： 按功能或页面划分独立模块，支持异步加载。
  
• 按需构建： 根据环境与平台构建对应资源（如 PC/Mobile）。
  
• 构建优化： 使用现代构建工具（如 Vite）实现极速热更新与模块缓存。
  
• 组件库抽象： 统一交互体验，减少重复代码。
  
• CI/CD 集成性能检测： 构建后自动跑 Lighthouse 分析与性能报警。
  

📈 卡顿监控与指标体系篇

核心目标：实现性能状态的实时采集、追踪与分析

• 
  
• 前端埋点系统： 埋点采集加载时长、接口响应、操作耗时等。
  
• Web Vitals 指标： 包括 FCP、LCP、CLS、FID，衡量关键体验节点。
  
• 用户真实行为采集（RUM）： 获取用户端真实性能数据，发现不可复现问题。
  
• FMP、TTI 指标分析： 更深入理解页面何时真正可用。
  
• 长任务检测与上报： 利用 PerformanceObserver 检测大于 50ms 的任务。
  
• 链路追踪与心跳检测： 结合用户行为路径记录性能状态变化，实现全链路性能可视化。
  

⚙️ R 树与任务调度篇：浏览器机制底层优化

核心目标：深入调优浏览器内部行为与主线程调度策略

• 
  
• 优化 R 树结构： 减少渲染树节点复杂度，提升布局计算速度。
  
• 合理划分任务优先级： 使用 requestIdleCallback 管理非关键任务。
  
• 任务切片技术： 利用时间分片方式，避免一次性执行耗时任务。
  
• 异步加载与事件延迟绑定： 减少初始化负担，按需激活模块。
  
• 避免不必要的闭包与内存泄漏： 减少长生命周期对象与事件引用。
  

🧩 最佳实践篇：开发阶段的性能意识与规范

核心目标：在编码阶段减少冗余与未来负担

• 
  
• 代码结构解耦： 使用职责单一的组件、模块，便于优化与复用。
  
• 共享模式与抽象层设计： 避免重复逻辑，提升模块复用率。
  
• JavaScript 解构优化： 减少不必要的中间对象创建。
  
• 利用浏览器缓存策略： 强缓存、协商缓存合理搭配。
  
• 图片/字体优化： 使用现代格式（如 WebP、woff2），减小体积。
  
• 二进制资源压缩： WASM、Protobuf、SVG 等适用于高压缩率场景。
  
• 预加载顺序控制： 合理规划脚本/资源的优先级，确保关键路径畅通。
  

重构

前端重构是指在不改变功能和外部行为的前提下，对已有代码结构、组织方式进行优化，使其更加清晰、规范、可维护。

为什么要重构？

前端中典型的重构场景：

重构的原则

前端重构在工程化体系中，既是技术优化，也是团队协作、质量保障、演进能力的体现。它不是简单地“重写”，而是建立在规范、工具、流程、目标之上的系统性优化，是现代前端团队走向成熟的重要标志。

最后（很重要 🔞）

你是否遇到这些问题？

• 
  
• 项目越做越大，维护成本越来越高？
  
• 团队协作混乱，代码风格各不相同？
  
• 不懂工程化工具，效率低下、流程不清？
  

我正在筹备一套前端工程化体系的实战课程。如果你在学习前端的过程中感到方向模糊、技术杂乱无章，那么前端工程化将是你实现系统进阶的最佳路径。它不仅能帮你建立起对现代前端开发的整体认知，还能提升你在项目开发、协作规范、性能优化等方面的工程能力。

✅ 本课程覆盖构建工具、测试体系、脚手架、CI/CD 等核心模块，内容体系完整，贯穿从开发到上线的全流程。每一章节都配有贴近真实场景的企业级实战案例，帮助你边学边用，真正掌握现代团队所需的工程化能力，实现从 CRUD 开发者到工程型前端的跃迁。

下面是本次课程的实战内容大纲，覆盖从项目初始化、自动化流程到规范建设与持续交付的全流程实践。

🧱 1. 项目规范与代码质量保障

• 
  
• Prettier + ESLint + editconfig 自动化格式与风格校验
  
• Commitlint + Husky 提交规范流程
  
• TypeScript 工程化规范与类型约束体系
  

🔧 2. 构建系统深入解析

• 
  
• Webpack 构建机制与优化技巧
  
• 自定义 Loader/Plugin 开发
  
• 构建速度与体积双优化实践
  

⚙️ 3. 编译原理与兼容性处理

• 
  
• Babel 编译机制详解
  
• 编写自定义 Babel 插件，掌握 AST 核心
  

🔄 4. 自动化工作流与 CI/CD

• 
  
• GitHub Actions 全流程部署
  
• 多环境自动发布与持续集成实战
  

🚀 5. SEO 与性能优化实战

• 
  
• 搜索引擎友好页面构建（SSR + Meta 管理）
  
• Web Vitals 性能指标优化与真实用户监控
  

最终会通过具体的项目案例来分析，我是怎么做的。

🧩 6. Monorepo 架构能力提升

• 
  
• Monorepo 应用场景与落地方案
  
• Lerna / Nx / Turborepo 工具生态对比与选型
  

🏗️ 7. 企业级脚手架开发实战

从零到一实现并发布一个跟 create-react-app 一样的前端脚手架，并且支持 vue。通过这个过程彻底搞懂大部分工程化配置，目录结构、Monorepo、CI、CD、Git 规范等等，项目最终会上线 NPM 并开源。

🔍 8. 动手实现 Mini ESLint 插件

• 
  
• AST 入门与代码分析原理
  
• 插件机制、规则系统与静态检查实战
  

⚛️ 9. React 项目架构设计指南

• 
  
• 项目初始化与环境配置
  
• 模块划分、职责解耦、状态管理方案
  
• 中大型项目架构分层模型实战
  

🧪 10. 自动化测试体系搭建

• 
  
• vitest 单元测试用例编写与覆盖率分析
  
• Playwright 端到端测试实战
  

📡 11. 可观测性与前端监控系统

• 
  
• 埋点设计 + 数据上报机制实现
  
• 错误监控与性能指标采集（含 Lighthouse）
  
• 可视化看板 / 告警体系构建
  

🛠️ 12. 高效调试与开发技巧

• 
  
• DevTools 使用技巧与性能瓶颈定位
  
• 开发效率工具与团队协作小妙招
  

小结

这门课程适合希望系统掌握前端工程能力的开发者，无论你是想从中级进阶高级，还是希望主导复杂项目与团队规范建设，都能从中受益。你将收获一套可复用的企业级项目模板、完整的自动化部署流程、实战可落地的工程化工具链，以及更重要的——工程化思维与项目掌控力。

总结

本课程为付费课程，当然也有不少免费内容可参考，我之前也分享过很多关于前端工程化的干货。如果你觉得这套体系对你有价值、能真正帮到你，欢迎私聊我了解更多详情。

如果你对开源感兴趣，想参与项目、学习经验，或者只是想和一群志同道合的前端朋友一起交流成长，欢迎加我微信，我可以拉你进群一起讨论。

我开源了一个基于 Tiptap 实现一个功能丰富的协同编辑器 🚀🚀🚀

我的 v：yunmz777