前端工程化杂谈

一、自动文档工具

1. Storybook

英文全称：Storybook 中文解释：故事书，是一个用于构建、测试和展示UI组件的开源工具

核心功能：

独立开发和测试UI组件
自动生成组件文档
支持多种视图和交互测试
插件生态丰富

面试题：

Q: Storybook的主要作用是什么？它如何提升前端开发效率？
A: Storybook可以让开发者独立开发和测试UI组件，自动生成文档，减少团队沟通成本，提高组件复用率。

坑点与易错点及解决方案：

过度依赖Storybook可能导致与实际应用环境脱节
- 解决方案：结合实际应用环境进行测试，定期在真实应用中验证组件行为；使用 Storybook 的 addon-viewport 和 addon-a11y 等插件模拟真实环境
  javascript
```
// .storybook/main.js
module.exports = {
  addons: [
    '@storybook/addon-viewport',
    '@storybook/addon-a11y'
  ]
};
```

组件故事编写不完整，缺乏边界情况测试

解决方案：使用 Storybook 的 Controls 插件添加交互式控件，覆盖各种输入场景；编写明确的测试用例文档

javascript

// Button.stories.js
export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
  disabled: false,
  size: 'medium'
};
Primary.argTypes = {
  size: {
    control: {
      type: 'select',
      options: ['small', 'medium', 'large']
    }
  }
};

配置复杂，需要额外学习成本
- 解决方案：使用 Storybook 的自动配置功能；参考官方模板和示例；使用 addon-docs 简化文档生成
  bash
```
# 使用自动配置初始化 Storybook
npx sb init --type vue
```

同类对比：

工具	优势	劣势
Storybook	组件隔离开发、文档自动生成、测试友好	配置复杂、学习成本高
Styleguidist	基于代码注释生成文档、配置简单	功能相对单一
Docusaurus	适合大型文档站点、SEO友好	组件开发体验一般

记忆口诀：组件故事独立测，文档自动效率高，插件丰富功能强，配置复杂需学习。

2. VitePress

英文全称：VitePress 中文解释：基于Vite的静态站点生成器，专为技术文档设计

核心功能：

基于Vite，构建速度快
Vue驱动，支持Vue组件
Markdown增强，支持自定义容器和组件
自动生成侧边栏和导航

面试题：

Q: VitePress与VuePress的主要区别是什么？
A: VitePress基于Vite构建，速度更快；配置更简洁；默认支持Vue 3；优化了构建性能。

坑点与易错点及解决方案：

文档结构变更时需要手动更新导航配置

解决方案：使用 VitePress 的自动导航生成功能；结合文件系统路由，让导航配置与文件结构保持同步

javascript

// .vitepress/config.js
export default {
  themeConfig: {
    sidebar: [
      {
        text: '指南',
        items: [
          { text: '快速开始', link: '/guide/quick-start' },
          { text: '基础配置', link: '/guide/basic-config' }
        ]
      }
    ]
  },
  // 使用插件自动生成侧边栏
  plugins: [
    [
      'vitepress-plugin-auto-sidebar',
      {
        contentRoot: '/docs',
        sidebarConfigKey: 'themeConfig.sidebar'
      }
    ]
  ]
};

自定义主题开发复杂度较高
插件生态不如VuePress丰富

同类对比：

工具	优势	劣势
VitePress	构建速度快、配置简洁、Vue 3支持	插件生态相对薄弱
VuePress	插件丰富、社区成熟	构建速度较慢、默认Vue 2
Docusaurus	React生态、功能全面	学习成本较高

记忆口诀：Vite构建速度快，Vue驱动文档好，Markdown增强强，导航自动配置简。

3. Docusaurus

英文全称：Docusaurus 中文解释：Facebook开源的静态站点生成器，专为开源项目文档设计

核心功能：

React驱动，支持React组件
Markdown增强，支持MDX
自动生成版本化文档
内置搜索功能
支持博客功能

面试题：

Q: Docusaurus的主要特点是什么？适合什么场景使用？
A: Docusaurus适合构建大型开源项目文档，支持版本化管理，内置搜索和博客功能，React生态友好。

坑点与易错点：

默认使用React，Vue开发者需要额外学习
自定义主题开发需要熟悉React和Docusaurus架构
构建时间相对较长

同类对比：

工具	优势	劣势
Docusaurus	React生态、版本化文档、内置搜索	学习成本较高、构建速度一般
VitePress	构建速度快、Vue生态	功能相对简单
GitBook	协作编辑、导出功能	商业化趋势明显

记忆口诀：React驱动文档强，版本管理内置搜，博客功能样样有，开源项目好帮手。

二、Mock数据体系

1. Mock.js

英文全称：Mock.js 中文解释：一款模拟数据生成器，用于前端开发时模拟后端接口数据

核心功能：

基于模板生成模拟数据
拦截Ajax请求，模拟响应
支持随机数据生成
配置简单，易于使用

面试题：

Q: Mock.js的工作原理是什么？它如何拦截Ajax请求？
A: Mock.js通过重写XMLHttpRequest对象来拦截Ajax请求，根据配置的规则返回模拟数据，无需实际后端接口。

坑点与易错点：

与实际API结构不一致导致联调问题
随机数据生成规则复杂，维护成本高
不支持WebSocket等现代API

同类对比：

工具	优势	劣势
Mock.js	配置简单、拦截Ajax、随机数据	不支持WebSocket、与实际API可能脱节
MSW	支持Fetch/Ajax/WebSocket、网络层模拟	配置复杂、学习成本高
JSON Server	快速搭建REST API、支持增删改查	功能简单、不适合复杂场景

记忆口诀：模拟数据Mock.js，Ajax拦截不用等，随机生成规则多，配置简单易上手。

2. MSW (Mock Service Worker)

英文全称：Mock Service Worker 中文解释：模拟服务工作线程，是一个API模拟库

核心功能：

基于Service Worker API
支持Fetch、Ajax、WebSocket
网络层模拟，不依赖特定框架
支持浏览器和Node.js环境

面试题：

Q: MSW与传统Mock工具的主要区别是什么？为什么说它更接近真实环境？
A: MSW基于Service Worker在网络层拦截请求，不修改任何应用代码，支持所有HTTP客户端，更接近真实网络环境。

坑点与易错点：

Service Worker配置复杂，需要HTTPS环境
首次使用需要额外学习Service Worker知识
调试相对困难

同类对比：

工具	优势	劣势
MSW	网络层模拟、支持所有HTTP客户端、环境一致	配置复杂、需要Service Worker知识
Mock.js	配置简单、学习成本低	功能有限、与真实环境有差异
nock	Node.js环境友好、拦截HTTP请求	浏览器环境不支持

记忆口诀：服务工作线程强，网络层拦截真实，支持所有客户端，配置复杂需学习。

3. 本地JSON Server

英文全称：JSON Server 中文解释：一个基于JSON文件的快速REST API服务器

核心功能：

基于JSON文件生成REST API
支持增删改查操作
支持分页、排序、过滤
配置简单，启动快速

面试题：

Q: 如何使用JSON Server快速搭建一个模拟REST API？它适合什么场景？
A: 通过npm安装JSON Server，创建db.json文件定义数据结构，运行json-server --watch db.json即可。适合原型开发和简单接口模拟。

坑点与易错点：

数据持久化依赖JSON文件，不适合高并发
功能有限，不支持复杂业务逻辑
缺乏认证和授权机制

同类对比：

工具	优势	劣势
JSON Server	配置简单、启动快速、支持REST API	功能有限、不适合复杂场景
MSW	功能强大、环境真实	配置复杂、学习成本高
Mock.js	前端拦截、随机数据	不支持真实API调用

记忆口诀：JSON文件当数据库，REST API自动生，增删改查都支持，原型开发好帮手。

三、接口联调平台

1. YApi

英文全称：YApi 中文解释：高效、易用、功能强大的API管理平台

核心功能：

API文档管理
Mock数据生成
接口测试
权限管理
插件机制

面试题：

Q: YApi的主要功能有哪些？它如何提升团队的API协作效率？
A: YApi提供API文档管理、Mock数据、接口测试等功能，统一了API规范，减少沟通成本，提高协作效率。

坑点与易错点：

部署维护成本高，需要独立服务器
界面相对老旧，用户体验一般
部分高级功能需要插件支持

同类对比：

工具	优势	劣势
YApi	开源免费、功能全面、插件支持	部署复杂、界面老旧
Apifox	界面美观、功能集成度高、云端部署	免费版功能有限
Postman	生态丰富、支持团队协作	高级功能付费、界面复杂

记忆口诀：开源API管理强，文档Mock测试全，权限管理插件多，部署复杂界面旧。

2. Apifox

英文全称：Apifox 中文解释：API一体化协作平台，集成API设计、文档、测试、Mock等功能

核心功能：

API设计与文档
Mock数据生成
接口测试
自动化测试
云端协作

面试题：

Q: Apifox与Postman的主要区别是什么？它的优势在哪里？
A: Apifox集成了API设计、文档、测试、Mock等功能，云端协作更方便，界面更简洁，适合团队协作。

坑点与易错点：

免费版功能有限，高级功能需要付费
云端依赖度高，离线使用体验差
部分功能细节不如Postman成熟

同类对比：

工具	优势	劣势
Apifox	功能集成度高、界面美观、云端协作	免费版限制多、离线体验差
Postman	生态丰富、功能成熟、社区活跃	高级功能付费、界面复杂
YApi	开源免费、部署灵活	界面老旧、功能分散

记忆口诀：API一体化平台，设计文档测试全，云端协作界面美，免费版限需付费。

四、构建工具

1. Webpack

英文全称：Webpack 中文解释：一个现代JavaScript应用程序的静态模块打包器

核心功能：

模块打包
代码分割
热模块替换
插件系统
loader机制

面试题：

Q: Webpack的核心概念有哪些？它是如何工作的？
A: Webpack的核心概念包括入口、输出、loader、插件、模式等。它通过分析模块间的依赖关系，将多个文件打包成一个或多个bundle。

坑点与易错点：

配置复杂，学习曲线陡峭
构建速度慢，特别是大型项目
loader和插件版本兼容性问题
优化配置需要深入理解原理

同类对比：

工具	优势	劣势
Webpack	功能全面、插件生态丰富、成熟稳定	配置复杂、构建速度慢
Vite	构建速度快、配置简洁、HMR优秀	生态相对薄弱、大型项目经验少
Rollup	输出体积小、Tree-shaking优秀	配置复杂、HMR支持差
esbuild	极快的构建速度、简单配置	功能相对单一、插件生态弱

记忆口诀：模块打包Webpack，配置复杂功能全，插件loader生态富，构建速度是短板。

2. Vite

英文全称：Vite 中文解释：下一代前端构建工具，基于ESM和Rollup

核心功能：

极快的冷启动
即时热模块替换（HMR）
按需编译
配置简洁
支持多种框架

面试题：

Q: Vite为什么比Webpack快？它的核心原理是什么？
A: Vite基于ESM，开发时不打包，按需编译；生产环境使用Rollup打包，利用浏览器原生ES模块支持，所以启动和热更新速度更快。

坑点与易错点：

依赖浏览器原生ESM支持，旧浏览器需要兼容处理
插件生态不如Webpack丰富
大型项目经验相对较少
配置过于简洁，高级功能需要额外学习

同类对比：

工具	优势	劣势
Vite	构建速度快、配置简洁、HMR优秀	生态相对薄弱、旧浏览器支持差
Webpack	功能全面、插件丰富、成熟稳定	配置复杂、构建速度慢
Rollup	输出优化好、Tree-shaking强	开发体验一般

记忆口诀：ESM驱动速度快，冷启动热更即时，配置简洁框架全，生态薄弱需发展。

3. Rollup

英文全称：Rollup 中文解释：一个JavaScript模块打包器，专注于生成更小、更快的库

核心功能：

ES模块打包
Tree-shaking优化
代码分割
插件系统
多格式输出（ESM、CJS、UMD等）

面试题：

Q: Rollup与Webpack的适用场景有什么不同？为什么Rollup更适合构建库？
A: Rollup更适合构建JavaScript库，因为它的Tree-shaking更优秀，输出的代码体积更小；Webpack更适合构建应用，因为它的功能更全面，支持多种资源类型。

坑点与易错点：

配置相对复杂
HMR支持较差，开发体验一般
对非ES模块的支持不如Webpack
大型应用构建经验少

同类对比：

工具	优势	劣势
Rollup	Tree-shaking优秀、输出体积小、适合构建库	开发体验一般、资源处理能力弱
Webpack	功能全面、资源处理强、开发体验好	输出体积大、配置复杂
esbuild	构建速度极快	功能相对单一

记忆口诀：库打包用Rollup，Tree-shaking效果好，输出体积小又快，开发体验稍欠缺。

4. esbuild

英文全称：esbuild 中文解释：一个用Go语言编写的极快的JavaScript打包器和压缩器

核心功能：

极快的构建速度
ES模块和CommonJS支持
代码压缩
Tree-shaking
增量构建

面试题：

Q: esbuild的构建速度为什么这么快？它有哪些局限性？
A: esbuild用Go语言编写，并行处理能力强，没有Node.js的单线程限制；但它的插件生态薄弱，功能相对单一，不适合复杂项目。

坑点与易错点：

插件生态非常薄弱
部分高级功能缺失
社区支持不如其他工具
定制化能力有限

同类对比：

工具	优势	劣势
esbuild	构建速度极快、内存占用低	插件生态弱、功能相对单一
Vite	开发体验好、配置简洁	构建速度不如esbuild
Webpack	功能全面、生态丰富	构建速度慢

记忆口诀：Go语言编写速度狂，构建压缩都很快，插件生态很薄弱，功能单一需谨慎。

五、性能优化相关

1. 打包优化

英文全称：Bundle Optimization 中文解释：对前端打包输出的文件进行优化，减少体积和加载时间

核心技术：

代码分割（Code Splitting）
懒加载（Lazy Loading）
按需加载（On-demand Loading）
缓存策略

面试题：

Q: 前端打包优化的主要策略有哪些？它们分别解决什么问题？
A: 主要策略包括代码分割（减少初始加载体积）、懒加载（按需加载资源）、按需加载（只加载使用的模块）、缓存策略（利用浏览器缓存）。

坑点与易错点：

代码分割过度导致请求过多
懒加载时机不当影响用户体验
缓存策略配置错误导致资源无法更新
按需加载实现复杂，容易引入Bug

记忆口诀：打包优化四策略，代码分割体积小，懒加载按需加载，缓存策略要记牢。

2. 加载优化

英文全称：Loading Optimization 中文解释：优化前端资源的加载过程，提高页面加载速度

核心技术：

gzip压缩
brotli压缩
CDN加速
预加载（Preload）
预连接（Prefetch）

面试题：

Q: gzip和brotli压缩的区别是什么？它们如何提升页面加载速度？
A: gzip压缩率适中，兼容性好；brotli压缩率更高，但兼容性稍差。它们都能减少文件体积，提高网络传输效率。

坑点与易错点：

压缩配置错误导致资源无法正确解压
CDN配置不当导致缓存失效
预加载过度导致资源浪费
兼容性问题影响部分用户

记忆口诀：加载优化有妙招，gzip brotli压缩好，CDN加速预加载，资源加载速度高。

3. 运行时优化

英文全称：Runtime Optimization 中文解释：优化前端应用在浏览器运行时的性能，提升用户体验

核心技术：

虚拟列表（Virtual List）
长任务切分
SSR（服务器端渲染）
SSG（静态站点生成）

面试题：

Q: 虚拟列表的工作原理是什么？它如何解决长列表性能问题？
A: 虚拟列表只渲染可视区域内的DOM元素，动态加载和卸载不可见元素，减少DOM操作，提高渲染性能。

坑点与易错点：

虚拟列表实现复杂，容易出现滚动不平滑
长任务切分不当导致功能异常
SSR配置复杂，增加服务器负担
SSG不适合动态内容多的页面

同类对比：

技术	优势	劣势
虚拟列表	减少DOM数量、提高渲染性能	实现复杂、滚动体验可能受影响
长任务切分	避免页面卡顿、提高响应性	实现复杂、可能影响功能逻辑
SSR	首屏加载快、SEO友好	服务器负担重、配置复杂
SSG	加载速度极快、SEO友好	不适合动态内容

记忆口诀：运行时优化要做好，虚拟列表长任务少，SSR首屏快SEO，SSG静态内容好。

六、监控体系

1. 前端日志上报

英文全称：Frontend Log Reporting 中文解释：收集前端应用的运行日志，用于监控和调试

核心功能：

错误日志收集
用户行为跟踪
性能数据上报
结构化日志存储

面试题：

Q: 前端日志上报需要注意哪些问题？如何避免对用户体验的影响？
A: 需要注意日志大小、上报时机、网络影响等问题。可以采用批量上报、采样上报、异步上报等方式减少对用户体验的影响。

坑点与易错点：

日志过多导致性能问题和存储压力
敏感信息泄露风险
上报时机不当影响用户体验
日志格式不统一，分析困难

记忆口诀：日志上报要谨慎，批量采样异步传，敏感信息要过滤，格式统一好分析。

2. 性能指标

英文全称：Performance Metrics 中文解释：用于衡量前端应用性能的关键指标

核心指标：

FP（First Paint）：首次绘制时间
LCP（Largest Contentful Paint）：最大内容绘制时间
CLS（Cumulative Layout Shift）：累积布局偏移
TTI（Time to Interactive）：可交互时间

面试题：

Q: 现代前端性能指标有哪些？它们分别反映了什么方面的用户体验？
A: 主要指标包括FP（视觉反馈）、LCP（内容加载速度）、CLS（视觉稳定性）、TTI（交互响应性）。

坑点与易错点：

过度关注单一指标，忽略整体体验
指标计算错误导致监控数据不准确
优化指标但牺牲了用户体验
缺乏对指标的深入理解

记忆口诀：性能指标四关键，FP首绘LCP内容，CLS布局不偏移，TTI交互要及时。

3. 异常监控

英文全称：Error Monitoring 中文解释：监控前端应用的运行时错误，及时发现和修复问题

核心工具：

Sentry
AliARMS
自定义异常捕获

面试题：

Q: Sentry的主要功能是什么？它如何帮助前端团队提升应用质量？
A: Sentry可以实时监控前端应用的错误，提供详细的错误堆栈、上下文信息和用户行为，帮助团队快速定位和修复问题。

坑点与易错点：

错误上报过多导致性能问题
敏感信息泄露风险
错误分类不当，难以有效分析
缺乏跟进机制，错误修复不及时

同类对比：

工具	优势	劣势
Sentry	功能全面、界面友好、社区活跃	高级功能付费
AliARMS	阿里云生态、中文支持好	定制化能力有限
自定义监控	完全可控、成本低	功能有限、维护成本高

记忆口诀：异常监控很重要，Sentry ARMS是代表，实时报错定位准，敏感信息要过滤。

七、工程文化与研发体系

1. 代码评审标准

英文全称：Code Review Checklist 中文解释：代码评审的标准和检查清单，确保代码质量

核心内容：

代码风格一致性
功能正确性
性能优化
安全性
可维护性

面试题：

Q: 代码评审的主要目的是什么？一个好的代码评审标准应该包含哪些内容？
A: 代码评审的主要目的是提高代码质量、分享知识、发现潜在问题。好的标准应该包含代码风格、功能正确性、性能、安全性、可维护性等方面。

坑点与易错点：

评审标准过于严格或宽松
评审过程流于形式，缺乏实质性反馈
评审时间过长，影响开发效率
缺乏对新人的指导和帮助

记忆口诀：代码评审有标准，风格功能性能全，安全维护不可少，严格宽松要平衡。

2. 版本管理

英文全称：Version Management 中文解释：管理代码的版本变化，确保团队协作和代码质量

核心工具：

核心策略：

Git Flow
Trunk-based Development

面试题：

Q: Git Flow和Trunk-based Development的主要区别是什么？它们分别适合什么场景？
A: Git Flow分支策略复杂，适合大型项目和稳定发布；Trunk-based Development分支策略简单，适合快速迭代和持续交付。

坑点与易错点：

分支管理混乱导致合并冲突
提交信息不规范，难以追溯
版本发布流程复杂，容易出错
回滚机制不完善，影响生产环境

记忆口诀：版本管理用Git，分支策略有两种，Git Flow复杂稳，Trunk-based迭代快。

3. 发布流程

英文全称：Release Process 中文解释：从代码开发到上线的完整流程，确保发布质量和稳定性

核心工具：

npm workspace
changeset

核心步骤：

代码开发
测试
构建
部署
验证

面试题：

Q: 现代前端发布流程的主要步骤是什么？如何确保发布的安全性和稳定性？
A: 主要步骤包括代码开发、测试、构建、部署、验证。可以通过自动化测试、灰度发布、回滚机制等确保安全性和稳定性。

坑点与易错点：

发布流程手动操作多，容易出错
缺乏自动化测试导致质量问题
灰度发布配置复杂，难以有效实施
回滚机制不完善，影响用户体验

记忆口诀：发布流程自动化，测试构建部署验，npm workspace changeset，版本管理更规范。

八、项目组织与模块化

1. 模块化规范

英文全称：Module Specification 中文解释：定义模块的导入、导出和依赖关系的规范

核心规范：

ESM（ECMAScript Modules）
CJS（CommonJS）
AMD（Asynchronous Module Definition）

面试题：

Q: ESM和CJS的主要区别是什么？它们的适用场景有哪些？
A: ESM是ES6标准的模块规范，支持静态分析和Tree-shaking，适合现代浏览器和构建工具；CJS是Node.js的模块规范，支持动态导入，适合Node.js环境。

坑点与易错点：

模块规范混用导致兼容性问题
循环依赖处理不当导致程序崩溃
导入路径配置错误导致模块找不到
缺乏对模块规范的深入理解

同类对比：

规范	优势	劣势
ESM	静态分析、Tree-shaking、标准规范	旧环境兼容性差
CJS	动态导入、Node.js原生支持	不支持Tree-shaking
AMD	异步加载、适合浏览器	配置复杂、已淘汰

记忆口诀：模块规范有三种，ESM现代标准好，CJS Node原生支持，AMD异步已淘汰。

2. 组件化体系

英文全称：Component System 中文解释：将UI拆分为可复用组件的设计体系

核心框架：

Vue
React

核心原则：

单一职责
可复用性
可维护性
可测试性

面试题：

Q: Vue和React组件化的主要区别是什么？它们的组件通信机制有哪些？
A: Vue组件化基于模板和选项API，React基于JSX和函数组件。组件通信机制包括props、事件、上下文、状态管理等。

坑点与易错点：

组件设计不合理导致复用性差
组件通信复杂导致维护困难
状态管理混乱导致Bug难以定位
性能优化不当导致渲染效率低

同类对比：

框架	优势	劣势
Vue	学习曲线平缓、文档友好、双向绑定	生态不如React丰富
React	生态丰富、灵活性高、适合大型项目	学习成本高、状态管理复杂

记忆口诀：组件化是趋势，Vue React两主流，单一职责复用高，通信机制要记牢。

3. 状态管理

英文全称：State Management 中文解释：管理前端应用的状态，确保状态的一致性和可预测性

核心工具：

Pinia
Redux Toolkit
Zustand
Recoil

面试题：

Q: 现代前端状态管理工具有哪些？它们的主要特点是什么？
A: 主要工具包括Pinia（Vue生态、简洁API）、Redux Toolkit（React生态、标准化）、Zustand（轻量级、API简洁）、Recoil（React生态、原子化设计）。

坑点与易错点：

状态管理过度导致复杂度增加
状态设计不合理导致难以维护
性能优化不当导致渲染效率低
缺乏对状态管理原理的深入理解

同类对比：

工具	优势	劣势
Pinia	Vue生态、简洁API、TypeScript支持好	仅支持Vue
Redux Toolkit	标准化、生态丰富、适合大型项目	学习曲线陡峭
Zustand	轻量级、API简洁、无模板代码	生态相对薄弱
Recoil	原子化设计、React原生支持	稳定性有待验证

记忆口诀：状态管理工具多，Pinia Redux Zustand，Recoil各有优缺点，选择适合项目的。

九、质量保障体系

1. 代码质量工具

英文全称：Code Quality Tools 中文解释：用于保证代码质量的工具集

核心工具：

ESLint
Prettier
Stylelint
Commitlint
Husky
lint-staged
TypeScript
EditorConfig

面试题：

Q: ESLint和Prettier的区别是什么？它们如何配合使用？
A: ESLint主要用于代码质量检查（如语法错误、最佳实践），Prettier主要用于代码格式化。可以通过ESLint插件或配置文件配合使用。

坑点与易错点：

配置冲突导致工具无法正常工作
规则过于严格或宽松影响开发效率
缺乏对工具的深入理解导致使用不当
团队成员配置不一致导致代码风格差异

记忆口诀：代码质量工具有，ESLint Prettier Stylelint，Commitlint Husky lint-staged，TypeScript EditorConfig要配合。

2. 自动化测试

英文全称：Automated Testing 中文解释：使用自动化工具进行软件测试，提高测试效率和质量

核心工具：

Vitest
Jest
@vue/test-utils
React Testing Library
Playwright
Cypress

核心类型：

单元测试
组件测试
E2E测试

面试题：

Q: 前端自动化测试的主要类型有哪些？它们分别适合测试什么内容？
A: 主要类型包括单元测试（测试函数/组件）、组件测试（测试组件行为）、E2E测试（测试完整用户流程）。

坑点与易错点：

测试用例编写不完整，覆盖率低
测试用例过于复杂，难以维护
测试执行速度慢，影响开发效率
测试环境配置复杂，容易出错

同类对比：

工具	优势	劣势
Vitest	构建速度快、Vite集成、API友好	生态相对薄弱
Jest	生态丰富、功能全面、社区活跃	构建速度慢
Playwright	多浏览器支持、自动化能力强	学习成本高
Cypress	界面友好、调试方便	浏览器支持有限

记忆口诀：自动化测试三类型，单元组件E2E，Vitest Jest测试库，Playwright Cypress自动化。

十、总结

前端工程化是一个庞大而复杂的体系，包含了从开发工具到团队文化的各个方面。本文对前端工程化中涉及的主要概念、工具、技术进行了详细的解释和对比，希望能够帮助读者更好地理解和应用前端工程化技术。

记住：前端工程化的核心是让开发像搭积木一样标准化、自动化、可持续迭代。选择适合自己团队和项目的工具和技术，不断学习和实践，才能真正提升前端开发效率和质量。

前端工程化杂谈 ​

一、自动文档工具 ​

1. Storybook ​

2. VitePress ​

3. Docusaurus ​

二、Mock数据体系 ​

1. Mock.js ​

2. MSW (Mock Service Worker) ​

3. 本地JSON Server ​

三、接口联调平台 ​

1. YApi ​

2. Apifox ​

四、构建工具 ​

1. Webpack ​

2. Vite ​

3. Rollup ​

4. esbuild ​

五、性能优化相关 ​

1. 打包优化 ​

2. 加载优化 ​

3. 运行时优化 ​

六、监控体系 ​

1. 前端日志上报 ​

2. 性能指标 ​

3. 异常监控 ​

七、工程文化与研发体系 ​

1. 代码评审标准 ​

2. 版本管理 ​

3. 发布流程 ​

八、项目组织与模块化 ​

1. 模块化规范 ​

2. 组件化体系 ​

3. 状态管理 ​

九、质量保障体系 ​

1. 代码质量工具 ​

2. 自动化测试 ​

十、总结 ​

前端工程化杂谈

一、自动文档工具

1. Storybook

2. VitePress

3. Docusaurus

二、Mock数据体系

1. Mock.js

2. MSW (Mock Service Worker)

3. 本地JSON Server

三、接口联调平台

1. YApi

2. Apifox

四、构建工具

1. Webpack

2. Vite

3. Rollup

4. esbuild

五、性能优化相关

1. 打包优化

2. 加载优化

3. 运行时优化

六、监控体系

1. 前端日志上报

2. 性能指标

3. 异常监控

七、工程文化与研发体系

1. 代码评审标准

2. 版本管理

3. 发布流程

八、项目组织与模块化

1. 模块化规范

2. 组件化体系

3. 状态管理

九、质量保障体系

1. 代码质量工具

2. 自动化测试

十、总结