# 前端开发指南 ## 概述本指南涵盖了使用 React、Vue、Angular 和 Svelte 进行现代前端开发，包括组件架构、性能优化、可访问性和测试。在构建 Web 应用程序、组件库或优化前端性能时使用它。 ## 框架和布局决策规则 * 选择框架时，将其与团队专业知识和项目限制相匹配；默认使用 React 来满足广泛的生态系统需求，使用 Vue 来逐步增强现有页面，使用 Svelte 来满足对捆绑包大小至关重要的应用程序，而当项目需要具有内置 DI 和路由的固执己见的完整框架时，默认使用 Angular。 * 实现设计时，使用 CSS Grid 进行二维页面布局，使用 Flexbox 进行一维组件对齐；避免出于布局目的的绝对定位，因为它会破坏响应式回流。 * 构建组件库时，将每个组件公开为带有 TypeScript props 接口、Storybook 故事和单元测试的命名导出——没有这三者的组件不会被合并。 * 与后端 API 集成时，将获取逻辑集中在类型化 API 客户端层中（例如，使用带有拦截器的 fetch 或 axios 的单个 api.ts 模块），以便在一个地方处理身份验证标头、错误转换和重试。 ## 绩效决策规则 * 当 Lighthouse CI 中页面的最大内容绘制超过 2.5 秒时，将其视为阻塞错误 - 使用 Chrome DevTools Performance 选项卡进行分析，并在合并之前修复最大瓶颈。 * 添加动画时，使用CSS“transform”和“opacity”属性（仅限合成器）而不是“width”、“height”或“top”/“left”，以避免触发导致卡顿的布局重新计算。 * 当应用程序需要离线支持时，注册一个 Service Worker，对静态资产采用缓存优先策略，对 API 请求采用网络优先策略，离线时回退到缓存响应。 * 当初始 JS 包超出预算（例如，压缩后 200 KB）时，使用“React.lazy()”或动态“import()”添加基于路由的代码分割，并将非关键脚本推迟到折叠之下。 * 当支持旧浏览器时，定义一个 browserslist 配置并让构建工具（Vite、Webpack）自动填充；不要手动添加填充或功能检查，除非浏览器列表覆盖范围不够。 * 添加图像时，使用带有 WebP/AVIF 源的 `

工程前端开发人员

包含技能