# Frontend Code Optimization

> 仅当用户明确要求前端可维护性治理、组件/逻辑系统性拆分、MVP 解耦、prop drilling 改造或前端重构优先级审计时使用；普通前端功能、样式和局部 bugfix 不触发。

- Skill: `peiiii/frontend-code-optimization` (Agent Skill)
- Install (CLI): `npx skillmds@latest add peiiii/frontend-code-optimization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/peiiii/frontend-code-optimization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: peiiii (https://skillmd.com/u/peiiii)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/peiiii/frontend-code-optimization

---


# 前端代码优化

## 定位

这是显式前端治理任务的诊断入口，不是所有前端改动的生命周期 owner。本 skill 只识别最高收益的结构问题并选择一个当前专项 owner；阶段推进、验证、Review 和交付由当前生命周期负责。

## 诊断顺序

1. 找出用户可见行为和稳定业务事实。
2. 判断当前对象是展示组件、业务容器、adapter、manager/store/presenter 还是生命周期 owner。
3. 查重复状态、重复 action、宽 props、组件内业务编排、effect 状态迁移和重复 UI 骨架。
4. 按收益排序：事实双写/错误 owner > 业务透传 > 生命周期不安全 > 重复实现 > 单纯文件偏长。
5. 每次只选择一个可验证 vertical slice，不同时启动所有前端专项治理。

## 专项选择

- 状态归属、MVP、store/manager/presenter、prop drilling：[View Logic 解耦](../mvp-view-logic-decoupling/SKILL.md)。
- React key、动态组件、streaming DOM、焦点/选区/iframe/editor 连续性：[渲染生命周期安全](../react-rendering-lifecycle-safety/SKILL.md)。
- 样式 owner、响应式、基础组件可移植性：[样式封装](../frontend-style-encapsulation/SKILL.md)。
- 操作语义、状态反馈、键盘可达性、tooltip/menu：[交互质量](../frontend-interaction-quality/SKILL.md)。
- 文件和 feature root 变化：[文件组织治理](../../governance/file-organization-governance/SKILL.md)。

同一判断只加载一个上述专项；完成该 slice 后再决定是否需要下一项。

## 实施原则

- 先删重复计算、重复状态、重复入口和无语义中间组件。
- 业务状态与动作收敛到最近 owner，展示组件只接展示合同。
- 不因文件长机械拆分；按变化原因、生命周期、不变量和真实复用拆分。
- 不用新 ViewModel/Presenter/Manager 包装混乱；新 owner 必须减少参数面或删除旧职责。
- 必要的清晰增长允许存在，不为行数门槛扩大无关重构。

## 输出

审计时给出 findings、证据、正确 owner、优先级和最小 slice。实施时只汇报当前 slice、主要验证和是否出现新的结构风险，不自动加载主观 review 或完整治理全家桶。