@umacloud/knowledge 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (418) hide show
  1. package/00-governance/governance-capabilities.md +557 -0
  2. package/00-governance/knowledge-map.md +39 -0
  3. package/00-governance/maintenance-policy.md +76 -0
  4. package/00-governance/review-checklist.md +81 -0
  5. package/README.md +13 -0
  6. package/ai/01-standards/agent-development-complete.md +691 -0
  7. package/ai/01-standards/llm-application-complete.md +488 -0
  8. package/ai/01-standards/mlops-complete.md +798 -0
  9. package/ai/01-standards/prompt-engineering-complete.md +646 -0
  10. package/ai/01-standards/rag-architecture-complete.md +649 -0
  11. package/ai/02-playbooks/llm-evaluation-playbook.md +847 -0
  12. package/ai/03-checklists/ai-project-checklist.md +215 -0
  13. package/ai/04-antipatterns/ai-antipatterns.md +661 -0
  14. package/ai/05-cases/case-rag-production.md +147 -0
  15. package/ai/06-glossary/ai-glossary.md +162 -0
  16. package/ai/agent-evaluation-benchmark.md +53 -0
  17. package/ai/ai-agent-memory-context-management.md +41 -0
  18. package/ai/ai-cost-capacity-optimization-playbook.md +42 -0
  19. package/ai/ai-data-security-and-compliance-playbook.md +37 -0
  20. package/ai/ai-domain-index-and-checklist.md +40 -0
  21. package/ai/ai-governance-maturity-model.md +50 -0
  22. package/ai/ai-model-selection-and-routing-strategy.md +47 -0
  23. package/ai/ai-observability-and-oncall-runbook.md +52 -0
  24. package/ai/ai-rag-engineering-playbook.md +42 -0
  25. package/ai/ai-red-team-and-safety-evaluation.md +42 -0
  26. package/ai/ai-release-readiness-and-rollback-gate.md +42 -0
  27. package/ai/llm-agent-engineering-deep-dive.md +57 -0
  28. package/ai/prompt-and-tool-guardrails.md +52 -0
  29. package/api/01-standards/enterprise-api-standards.md +198 -0
  30. package/api/01-standards/rest-api-design-guide.md +63 -0
  31. package/api/02-playbooks/api-pagination-playbook.md +93 -0
  32. package/api/02-playbooks/graphql-production-playbook.md +176 -0
  33. package/api/03-checklists/api-review-checklist.md +55 -0
  34. package/api/04-antipatterns/api-antipatterns.md +112 -0
  35. package/architecture/01-standards/api-gateway-patterns.md +496 -0
  36. package/architecture/01-standards/cloud-native-patterns.md +644 -0
  37. package/architecture/01-standards/distributed-systems-patterns.md +591 -0
  38. package/architecture/01-standards/event-driven-architecture.md +595 -0
  39. package/architecture/01-standards/microservices-patterns-complete.md +968 -0
  40. package/architecture/01-standards/microservices-patterns.md +495 -0
  41. package/architecture/01-standards/system-design-interview.md +664 -0
  42. package/architecture/02-playbooks/microservices-patterns-playbook.md +137 -0
  43. package/architecture/02-playbooks/migration-playbook.md +780 -0
  44. package/architecture/02-playbooks/system-design-playbook.md +779 -0
  45. package/architecture/03-checklists/architecture-decision-checklist.md +297 -0
  46. package/architecture/04-antipatterns/architecture-antipatterns.md +417 -0
  47. package/architecture/05-cases/case-netflix-microservices.md +413 -0
  48. package/architecture/06-glossary/architecture-glossary.md +164 -0
  49. package/architecture/adr-template-and-examples.md +38 -0
  50. package/architecture/api-gateway-deep-dive.md +1291 -0
  51. package/architecture/configuration-management.md +1162 -0
  52. package/architecture/distributed-transactions.md +1220 -0
  53. package/architecture/microservices-complete.md +735 -0
  54. package/architecture/resilience-and-disaster-patterns.md +37 -0
  55. package/architecture/service-governance.md +1198 -0
  56. package/architecture/system-architecture-deep-dive.md +37 -0
  57. package/backend/01-standards/analytics-and-growth.md +65 -0
  58. package/backend/01-standards/api-and-error-conventions.md +120 -0
  59. package/backend/01-standards/application-layering-and-packaging.md +160 -0
  60. package/backend/01-standards/auth-implementation.md +104 -0
  61. package/backend/01-standards/backend-framework-idioms.md +74 -0
  62. package/backend/01-standards/background-jobs-and-async.md +66 -0
  63. package/backend/01-standards/caching-strategies-complete.md +390 -0
  64. package/backend/01-standards/config-and-observability.md +77 -0
  65. package/backend/01-standards/data-modeling-and-persistence.md +94 -0
  66. package/backend/01-standards/django-complete.md +1765 -0
  67. package/backend/01-standards/email-and-notifications.md +64 -0
  68. package/backend/01-standards/fastapi-complete.md +925 -0
  69. package/backend/01-standards/file-upload-and-storage.md +66 -0
  70. package/backend/01-standards/graphql-api-complete.md +416 -0
  71. package/backend/01-standards/llm-application-standard.md +78 -0
  72. package/backend/01-standards/message-queue-patterns.md +379 -0
  73. package/backend/01-standards/microservices-and-distributed.md +78 -0
  74. package/backend/01-standards/nestjs-complete.md +2167 -0
  75. package/backend/01-standards/payment-integration.md +80 -0
  76. package/backend/01-standards/rate-limiting-complete.md +451 -0
  77. package/backend/01-standards/realtime-and-websocket.md +65 -0
  78. package/backend/01-standards/search-and-filtering.md +64 -0
  79. package/backend/01-standards/spring-boot-complete.md +445 -0
  80. package/backend/02-playbooks/api-design-playbook.md +718 -0
  81. package/backend/02-playbooks/email-send-playbook.md +130 -0
  82. package/backend/02-playbooks/file-upload-s3-playbook.md +153 -0
  83. package/backend/02-playbooks/typescript-enterprise-playbook.md +133 -0
  84. package/backend/02-playbooks/websocket-realtime-playbook.md +154 -0
  85. package/backend/03-checklists/api-launch-checklist.md +189 -0
  86. package/backend/04-antipatterns/backend-antipatterns.md +1051 -0
  87. package/blockchain/01-standards/blockchain-basics.md +557 -0
  88. package/blockchain/01-standards/smart-contract-development.md +1315 -0
  89. package/cicd/01-standards/deployment-and-delivery-standard.md +96 -0
  90. package/cicd/01-standards/github-actions-complete.md +473 -0
  91. package/cicd/01-standards/release-and-store-submission.md +75 -0
  92. package/cicd/02-playbooks/cicd-pipeline-playbook.md +144 -0
  93. package/cicd/02-playbooks/release-management-playbook.md +605 -0
  94. package/cicd/03-checklists/pipeline-security-checklist.md +168 -0
  95. package/cicd/04-antipatterns/cicd-antipatterns.md +589 -0
  96. package/cicd/05-cases/case-deployment-automation.md +221 -0
  97. package/cicd/05-cases/case-gitops-transformation.md +212 -0
  98. package/cicd/06-glossary/cicd-glossary.md +114 -0
  99. package/cicd/cicd-blueprint-deep-dive.md +38 -0
  100. package/cicd/release-readiness-gate.md +37 -0
  101. package/cloud-native/01-standards/container-security.md +741 -0
  102. package/cloud-native/01-standards/kubernetes-complete.md +812 -0
  103. package/cloud-native/02-playbooks/api-gateway-playbook.md +155 -0
  104. package/cloud-native/02-playbooks/gitops-with-argocd.md +760 -0
  105. package/cloud-native/02-playbooks/k8s-troubleshooting-playbook.md +1942 -0
  106. package/cloud-native/02-playbooks/message-queue-playbook.md +129 -0
  107. package/cloud-native/02-playbooks/multicloud-governance.md +726 -0
  108. package/cloud-native/02-playbooks/serverless-patterns.md +788 -0
  109. package/cloud-native/02-playbooks/service-mesh-playbook.md +612 -0
  110. package/cloud-native/02-playbooks/terraform-iac-playbook.md +143 -0
  111. package/cloud-native/03-checklists/container-security-checklist.md +431 -0
  112. package/cloud-native/03-checklists/k8s-production-readiness-checklist.md +460 -0
  113. package/cloud-native/04-antipatterns/container-antipatterns.md +660 -0
  114. package/cloud-native/04-antipatterns/k8s-antipatterns.md +743 -0
  115. package/cloud-native/05-cases/case-k8s-migration.md +478 -0
  116. package/cloud-native/05-cases/case-k8s-scaling.md +642 -0
  117. package/cloud-native/05-cases/case-k8s-security-incident.md +397 -0
  118. package/cloud-native/06-glossary/cloud-native-glossary.md +337 -0
  119. package/cross-platform/01-standards/cross-platform-frameworks.md +83 -0
  120. package/cross-platform/01-standards/platform-selection-and-architecture.md +77 -0
  121. package/data/01-standards/elasticsearch-complete.md +2098 -0
  122. package/data/01-standards/postgresql-complete.md +1613 -0
  123. package/data/01-standards/redis-complete.md +1527 -0
  124. package/data/02-playbooks/database-optimization-playbook.md +403 -0
  125. package/data/02-playbooks/elasticsearch-production-playbook.md +132 -0
  126. package/data/03-checklists/database-launch-checklist.md +187 -0
  127. package/data/04-antipatterns/database-antipatterns.md +873 -0
  128. package/data/05-cases/case-database-migration.md +310 -0
  129. package/data/06-glossary/database-glossary.md +440 -0
  130. package/data/data-governance-and-modeling-deep-dive.md +39 -0
  131. package/data-engineering/01-standards/airflow-complete.md +523 -0
  132. package/data-engineering/01-standards/kafka-complete.md +1521 -0
  133. package/data-engineering/02-playbooks/spark-etl-playbook.md +496 -0
  134. package/data-engineering/03-checklists/pipeline-launch-checklist.md +194 -0
  135. package/data-engineering/04-antipatterns/data-pipeline-antipatterns.md +684 -0
  136. package/data-engineering/05-cases/case-real-time-pipeline.md +355 -0
  137. package/data-engineering/06-glossary/data-engineering-glossary.md +429 -0
  138. package/database/01-standards/database-schema-standards.md +147 -0
  139. package/database/02-playbooks/postgresql-optimization-quick.md +52 -0
  140. package/database/02-playbooks/postgresql-performance-optimization.md +58 -0
  141. package/database/02-playbooks/postgresql-production-playbook.md +146 -0
  142. package/database/02-playbooks/redis-caching-playbook.md +117 -0
  143. package/database/03-checklists/database-review-checklist.md +50 -0
  144. package/database/04-antipatterns/database-antipatterns.md +112 -0
  145. package/design/01-standards/ui-design-system-complete.md +423 -0
  146. package/design/02-playbooks/design-handoff-playbook.md +254 -0
  147. package/design/02-playbooks/design-review-playbook.md +388 -0
  148. package/design/03-checklists/design-review-checklist.md +246 -0
  149. package/design/04-antipatterns/design-antipatterns.md +378 -0
  150. package/design/05-cases/case-design-system-adoption.md +328 -0
  151. package/design/06-glossary/design-glossary.md +329 -0
  152. package/design/ui-full-lifecycle-cross-platform-playbook.md +571 -0
  153. package/design/ux-system-deep-dive.md +38 -0
  154. package/design-systems/00-craft-rules.md +71 -0
  155. package/design-systems/aesthetic-families.md +43 -0
  156. package/design-systems/anti-ai-slop.md +162 -0
  157. package/design-systems/bold-geometric.md +120 -0
  158. package/design-systems/brutalist-bold.md +103 -0
  159. package/design-systems/editorial-clean.md +109 -0
  160. package/design-systems/glass-aurora.md +108 -0
  161. package/design-systems/modern-minimal.md +145 -0
  162. package/design-systems/premium-luxury.md +106 -0
  163. package/design-systems/product-type-design-map.md +48 -0
  164. package/design-systems/soft-warm.md +123 -0
  165. package/design-systems/tech-utility.md +113 -0
  166. package/desktop/01-standards/desktop-app-standard.md +72 -0
  167. package/desktop/01-standards/desktop-design.md +71 -0
  168. package/development/00-governance/document-template.md +41 -0
  169. package/development/01-standards/api-versioning-strategies.md +432 -0
  170. package/development/01-standards/authentication-patterns-complete.md +479 -0
  171. package/development/01-standards/css-architecture-complete.md +550 -0
  172. package/development/01-standards/database-migration-strategies.md +484 -0
  173. package/development/01-standards/elasticsearch-complete.md +347 -0
  174. package/development/01-standards/git-complete.md +371 -0
  175. package/development/01-standards/golang-complete.md +1565 -0
  176. package/development/01-standards/graphql-complete.md +298 -0
  177. package/development/01-standards/javascript-bundlers-complete.md +469 -0
  178. package/development/01-standards/javascript-typescript-complete.md +528 -0
  179. package/development/01-standards/jest-complete.md +275 -0
  180. package/development/01-standards/linux-complete.md +234 -0
  181. package/development/01-standards/logging-observability-complete.md +526 -0
  182. package/development/01-standards/microservices-communication.md +502 -0
  183. package/development/01-standards/mongodb-complete.md +406 -0
  184. package/development/01-standards/oauth2-complete.md +285 -0
  185. package/development/01-standards/performance-optimization-complete.md +289 -0
  186. package/development/01-standards/playwright-complete.md +247 -0
  187. package/development/01-standards/postgresql-complete.md +456 -0
  188. package/development/01-standards/pytest-complete.md +340 -0
  189. package/development/01-standards/python-async-programming.md +902 -0
  190. package/development/01-standards/python-complete.md +956 -0
  191. package/development/01-standards/python-decorators-complete.md +799 -0
  192. package/development/01-standards/python-design-patterns.md +2854 -0
  193. package/development/01-standards/python-packaging-distribution.md +420 -0
  194. package/development/01-standards/python-testing-strategies.md +607 -0
  195. package/development/01-standards/python-web-frameworks-comparison.md +471 -0
  196. package/development/01-standards/redis-complete.md +317 -0
  197. package/development/01-standards/rest-api-complete.md +316 -0
  198. package/development/01-standards/rust-complete.md +578 -0
  199. package/development/01-standards/typescript-advanced-types.md +1513 -0
  200. package/development/01-standards/web-security-complete.md +292 -0
  201. package/development/02-playbooks/api-design-playbook.md +810 -0
  202. package/development/02-playbooks/database-migration-playbook.md +580 -0
  203. package/development/02-playbooks/debugging-playbook.md +692 -0
  204. package/development/02-playbooks/feature-delivery-playbook.md +430 -0
  205. package/development/02-playbooks/incident-hotfix-playbook.md +387 -0
  206. package/development/02-playbooks/performance-optimization-playbook.md +531 -0
  207. package/development/02-playbooks/performance-tuning-playbook.md +652 -0
  208. package/development/02-playbooks/refactor-playbook.md +403 -0
  209. package/development/02-playbooks/release-playbook.md +469 -0
  210. package/development/03-checklists/architecture-review-checklist.md +168 -0
  211. package/development/03-checklists/data-migration-checklist.md +157 -0
  212. package/development/03-checklists/oncall-handover-checklist.md +173 -0
  213. package/development/03-checklists/pr-checklist.md +158 -0
  214. package/development/03-checklists/production-readiness-checklist.md +190 -0
  215. package/development/03-checklists/release-readiness-checklist.md +154 -0
  216. package/development/03-checklists/security-review-checklist.md +182 -0
  217. package/development/04-antipatterns/api-antipatterns.md +657 -0
  218. package/development/04-antipatterns/architecture-antipatterns.md +686 -0
  219. package/development/04-antipatterns/backend-antipatterns.md +648 -0
  220. package/development/04-antipatterns/cicd-antipatterns.md +540 -0
  221. package/development/04-antipatterns/code-smell-antipatterns.md +571 -0
  222. package/development/04-antipatterns/data-antipatterns.md +658 -0
  223. package/development/04-antipatterns/database-antipatterns.md +578 -0
  224. package/development/04-antipatterns/frontend-antipatterns.md +635 -0
  225. package/development/04-antipatterns/reliability-antipatterns.md +700 -0
  226. package/development/04-antipatterns/security-antipatterns.md +747 -0
  227. package/development/05-cases/case-api-version-migration.md +428 -0
  228. package/development/05-cases/case-authorization-hardening.md +383 -0
  229. package/development/05-cases/case-bluegreen-rollback.md +466 -0
  230. package/development/05-cases/case-cache-snowball-protection.md +485 -0
  231. package/development/05-cases/case-ci-cd-pipeline.md +544 -0
  232. package/development/05-cases/case-database-scaling.md +500 -0
  233. package/development/05-cases/case-db-hotspot-optimization.md +487 -0
  234. package/development/05-cases/case-incident-mttr-reduction.md +563 -0
  235. package/development/05-cases/case-microservice-migration.md +375 -0
  236. package/development/05-cases/case-performance-optimization.md +406 -0
  237. package/development/05-cases/case-security-incident-response.md +345 -0
  238. package/development/06-glossary/full-stack-glossary.md +166 -0
  239. package/development/09-maturity/quarterly-audit-template.md +35 -0
  240. package/development/11-ui-excellence/ui-aesthetic-system.md +41 -0
  241. package/development/11-ui-excellence/ui-engineering-excellence.md +435 -0
  242. package/development/12-scenarios/development-scenarios-guide.md +565 -0
  243. package/development/13-implementation-assets/implementation-toolkit.md +282 -0
  244. package/development/13-implementation-assets/knowledge-gates-execution.md +43 -0
  245. package/development/14-full-lifecycle/software-lifecycle-gates.md +511 -0
  246. package/development/15-lifecycle-templates/project-templates-collection.md +791 -0
  247. package/development/api-contract-and-versioning-guide.md +36 -0
  248. package/development/api-governance-complete.md +43 -0
  249. package/development/backend-engineering-complete.md +43 -0
  250. package/development/code-review-quality-complete.md +43 -0
  251. package/development/concurrency-reliability-complete.md +43 -0
  252. package/development/database-engineering-complete.md +43 -0
  253. package/development/engineering-effectiveness-complete.md +43 -0
  254. package/development/engineering-standards-deep-dive.md +38 -0
  255. package/development/frontend-engineering-complete.md +43 -0
  256. package/development/performance-capacity-complete.md +43 -0
  257. package/development/refactor-migration-complete.md +42 -0
  258. package/development/refactoring-and-techdebt-playbook.md +37 -0
  259. package/development/security-in-development-complete.md +43 -0
  260. package/devops/01-standards/cicd-pipeline-complete.md +262 -0
  261. package/devops/01-standards/docker-complete.md +1490 -0
  262. package/devops/01-standards/github-actions-complete.md +337 -0
  263. package/devops/01-standards/kubernetes-complete.md +638 -0
  264. package/devops/01-standards/terraform-complete.md +2117 -0
  265. package/devops/02-playbooks/docker-compose-playbook.md +233 -0
  266. package/devops/02-playbooks/docker-k8s-production-playbook.md +186 -0
  267. package/devops/02-playbooks/docker-production-playbook.md +952 -0
  268. package/edge-iot/01-standards/edge-iot-complete.md +473 -0
  269. package/experts/architect/api-design.md +178 -0
  270. package/experts/architect/methodology.md +124 -0
  271. package/experts/architect/security.md +75 -0
  272. package/experts/backend-lead/methodology.md +216 -0
  273. package/experts/devops/methodology.md +160 -0
  274. package/experts/frontend-lead/methodology.md +178 -0
  275. package/experts/product-manager/industry/ecommerce.md +43 -0
  276. package/experts/product-manager/industry/saas.md +40 -0
  277. package/experts/product-manager/methodology.md +97 -0
  278. package/experts/qa-lead/methodology.md +123 -0
  279. package/experts/qa-lead/test-strategy.md +128 -0
  280. package/experts/uiux-designer/methodology.md +125 -0
  281. package/frontend/01-standards/accessibility-complete.md +532 -0
  282. package/frontend/01-standards/accessibility-standard.md +74 -0
  283. package/frontend/01-standards/admin-dashboard-and-crud.md +72 -0
  284. package/frontend/01-standards/design-tokens-complete.md +444 -0
  285. package/frontend/01-standards/forms-and-validation.md +77 -0
  286. package/frontend/01-standards/frontend-architecture-and-layering.md +119 -0
  287. package/frontend/01-standards/i18n-and-localization.md +65 -0
  288. package/frontend/01-standards/nextjs-complete.md +451 -0
  289. package/frontend/01-standards/react-complete.md +713 -0
  290. package/frontend/01-standards/react-hooks-complete-guide.md +1100 -0
  291. package/frontend/01-standards/react-hooks-complete.md +1171 -0
  292. package/frontend/01-standards/seo-and-web-vitals.md +77 -0
  293. package/frontend/01-standards/state-management-complete.md +444 -0
  294. package/frontend/01-standards/vue-complete.md +499 -0
  295. package/frontend/01-standards/vue3-complete.md +2002 -0
  296. package/frontend/01-standards/web-framework-best-practices.md +64 -0
  297. package/frontend/01-standards/web-performance-complete.md +495 -0
  298. package/frontend/02-playbooks/accessibility-a11y-playbook.md +161 -0
  299. package/frontend/02-playbooks/frontend-performance-playbook.md +707 -0
  300. package/frontend/02-playbooks/i18n-internationalization-playbook.md +120 -0
  301. package/frontend/02-playbooks/performance-optimization-playbook.md +163 -0
  302. package/frontend/02-playbooks/react-nextjs-production-playbook.md +167 -0
  303. package/frontend/02-playbooks/react-state-management-playbook.md +173 -0
  304. package/frontend/03-checklists/component-quality-checklist.md +166 -0
  305. package/frontend/03-checklists/frontend-launch-checklist.md +299 -0
  306. package/frontend/04-antipatterns/frontend-antipatterns.md +886 -0
  307. package/frontend/05-cases/case-performance-optimization.md +274 -0
  308. package/harmony/01-standards/harmonyos-arkts-standard.md +75 -0
  309. package/harmony/01-standards/harmonyos-design.md +65 -0
  310. package/high-quality-engineering-playbook.md +54 -0
  311. package/incident/01-standards/incident-response-complete.md +303 -0
  312. package/incident/02-playbooks/chaos-engineering-playbook.md +883 -0
  313. package/incident/02-playbooks/postmortem-playbook.md +398 -0
  314. package/incident/03-checklists/incident-readiness-checklist.md +181 -0
  315. package/incident/04-antipatterns/incident-antipatterns.md +490 -0
  316. package/incident/05-cases/case-cascade-failure.md +176 -0
  317. package/incident/06-glossary/incident-glossary.md +114 -0
  318. package/incident/postmortem-and-response-deep-dive.md +39 -0
  319. package/industries/ecommerce/ecommerce-complete.md +631 -0
  320. package/industries/education/education-complete.md +555 -0
  321. package/industries/fintech/fintech-complete.md +501 -0
  322. package/industries/gaming/gaming-complete.md +587 -0
  323. package/industries/healthcare/healthcare-complete.md +452 -0
  324. package/low-code/01-standards/low-code-complete.md +944 -0
  325. package/miniprogram/01-standards/ai-common-mistakes.md +61 -0
  326. package/miniprogram/01-standards/miniprogram-custom-navbar-capsule.md +77 -0
  327. package/miniprogram/01-standards/miniprogram-design.md +61 -0
  328. package/miniprogram/01-standards/miniprogram-standard.md +81 -0
  329. package/mobile/01-standards/android-material-design.md +70 -0
  330. package/mobile/01-standards/flutter-complete.md +384 -0
  331. package/mobile/01-standards/ios-design-hig.md +78 -0
  332. package/mobile/01-standards/mobile-app-standard.md +85 -0
  333. package/mobile/01-standards/react-native-complete.md +352 -0
  334. package/mobile/02-playbooks/mobile-cross-platform-playbook.md +175 -0
  335. package/mobile/02-playbooks/mobile-performance.md +473 -0
  336. package/mobile/03-checklists/mobile-release-checklist.md +234 -0
  337. package/mobile/04-antipatterns/mobile-antipatterns.md +798 -0
  338. package/mobile/05-cases/case-app-performance.md +500 -0
  339. package/mobile/05-cases/case-app-startup-optimization.md +218 -0
  340. package/mobile/06-glossary/mobile-glossary.md +484 -0
  341. package/observability/01-standards/observability-standards.md +103 -0
  342. package/observability/02-playbooks/prometheus-grafana-playbook.md +135 -0
  343. package/observability/02-playbooks/structured-logging-playbook.md +73 -0
  344. package/observability/03-checklists/observability-checklist.md +54 -0
  345. package/observability/04-antipatterns/observability-antipatterns.md +106 -0
  346. package/operations/01-standards/prometheus-monitoring-complete.md +1578 -0
  347. package/operations/02-playbooks/capacity-planning-playbook.md +620 -0
  348. package/operations/03-checklists/production-launch-checklist.md +365 -0
  349. package/operations/04-antipatterns/operations-antipatterns.md +664 -0
  350. package/operations/05-cases/case-sre-practices.md +581 -0
  351. package/operations/06-glossary/operations-glossary.md +120 -0
  352. package/operations/aiops-anomaly-detection.md +758 -0
  353. package/operations/capacity-planning.md +1061 -0
  354. package/operations/chaos-engineering.md +659 -0
  355. package/operations/incident-command-system.md +38 -0
  356. package/operations/observability-complete.md +442 -0
  357. package/operations/slo-sli-playbook.md +517 -0
  358. package/operations/sre-operations-deep-dive.md +39 -0
  359. package/package.json +8 -0
  360. package/performance/01-standards/performance-and-scalability.md +80 -0
  361. package/performance/01-standards/performance-standards.md +156 -0
  362. package/performance/02-playbooks/query-optimization-playbook.md +103 -0
  363. package/performance/03-checklists/performance-checklist.md +56 -0
  364. package/performance/04-antipatterns/performance-antipatterns.md +146 -0
  365. package/product/01-standards/product-management-complete.md +285 -0
  366. package/product/02-playbooks/feature-launch-playbook.md +207 -0
  367. package/product/02-playbooks/user-research-playbook.md +532 -0
  368. package/product/03-checklists/feature-launch-checklist.md +275 -0
  369. package/product/04-antipatterns/product-antipatterns.md +355 -0
  370. package/product/05-cases/case-mvp-to-scale.md +384 -0
  371. package/product/06-glossary/product-glossary.md +462 -0
  372. package/product/feature-prioritization-framework.md +40 -0
  373. package/product/kpi-and-metric-tree.md +37 -0
  374. package/product/product-discovery-and-prd-deep-dive.md +41 -0
  375. package/quantum/01-standards/quantum-complete.md +1186 -0
  376. package/security/01-standards/api-security-complete.md +511 -0
  377. package/security/01-standards/container-runtime-security.md +574 -0
  378. package/security/01-standards/data-protection-gdpr.md +543 -0
  379. package/security/01-standards/owasp-top10-complete.md +1890 -0
  380. package/security/01-standards/secure-coding-baseline.md +90 -0
  381. package/security/01-standards/supply-chain-security.md +441 -0
  382. package/security/01-standards/web-security-checklist.md +108 -0
  383. package/security/01-standards/zero-trust-architecture.md +521 -0
  384. package/security/02-playbooks/auth-sso-playbook.md +166 -0
  385. package/security/02-playbooks/incident-response-security-playbook.md +588 -0
  386. package/security/02-playbooks/owasp-api-security-playbook.md +129 -0
  387. package/security/02-playbooks/payment-integration-playbook.md +119 -0
  388. package/security/02-playbooks/penetration-testing-playbook.md +517 -0
  389. package/security/03-checklists/security-audit-checklist.md +356 -0
  390. package/security/04-antipatterns/security-coding-antipatterns.md +580 -0
  391. package/security/05-cases/case-log4shell-incident.md +537 -0
  392. package/security/05-cases/case-major-breaches.md +468 -0
  393. package/security/06-glossary/security-glossary.md +212 -0
  394. package/security/compliance-automation.md +993 -0
  395. package/security/container-security.md +680 -0
  396. package/security/devsecops-complete.md +426 -0
  397. package/security/sast-dast-sca.md +775 -0
  398. package/security/secrets-management.md +594 -0
  399. package/security/security-architecture-deep-dive.md +37 -0
  400. package/security/threat-modeling-stride-playbook.md +40 -0
  401. package/seed-templates/auth-system.md +59 -0
  402. package/seed-templates/blog-content.md +94 -0
  403. package/seed-templates/dashboard.md +89 -0
  404. package/seed-templates/docs-site.md +73 -0
  405. package/seed-templates/e-commerce.md +50 -0
  406. package/seed-templates/saas-landing.md +92 -0
  407. package/seed-templates/settings-page.md +51 -0
  408. package/testing/01-standards/test-strategy-and-layering.md +83 -0
  409. package/testing/01-standards/testing-strategy-complete.md +422 -0
  410. package/testing/01-standards/unit-testing-best-practices.md +118 -0
  411. package/testing/02-playbooks/e2e-testing-playbook.md +988 -0
  412. package/testing/02-playbooks/testing-strategy-playbook.md +126 -0
  413. package/testing/03-checklists/test-strategy-checklist.md +208 -0
  414. package/testing/04-antipatterns/testing-antipatterns.md +718 -0
  415. package/testing/05-cases/case-testing-transformation.md +300 -0
  416. package/testing/06-glossary/testing-glossary.md +110 -0
  417. package/testing/risk-based-test-matrix.md +36 -0
  418. package/testing/testing-strategy-deep-dive.md +37 -0
package/frontend/02-playbooks/frontend-performance-playbook.md ADDED
@@ -0,0 +1,707 @@
1
+ ---
2
+ id: frontend-performance-playbook
3
+ title: 前端性能优化 Playbook
4
+ domain: frontend
5
+ category: 02-playbooks
6
+ difficulty: intermediate
7
+ tags: [frontend, performance, playbook, vitals, 代码分割, 关键渲染路径优化, 性能审计, 懒加载]
8
+ quality_score: 70
9
+ last_updated: 2026-06-15
10
+ ---
11
+ # 前端性能优化 Playbook
12
+
13
+ > 适用场景：Web 应用性能审计、优化执行、持续监控全流程。
14
+ > 优先级排序：关键渲染路径 > 资源体积 > 运行时性能 > 缓存与分发。
15
+
16
+ ---
17
+
18
+ ## 1. 性能审计
19
+
20
+ ### 1.1 Lighthouse 审计
21
+
22
+ ```bash
23
+ # CLI 审计（Chrome 需已安装）
24
+ npx lighthouse https://example.com \
25
+ --output=json,html \
26
+ --output-path=./reports/lighthouse \
27
+ --preset=desktop \
28
+ --chrome-flags="--headless --no-sandbox"
29
+
30
+ # 移动端审计
31
+ npx lighthouse https://example.com \
32
+ --preset=perf \
33
+ --emulated-form-factor=mobile \
34
+ --throttling.cpuSlowdownMultiplier=4
35
+ ```
36
+
37
+ **关键指标阈值**：
38
+
39
+ | 指标 | 良好 | 需改善 | 差 |
40
+ |------|------|--------|----|
41
+ | LCP (Largest Contentful Paint) | < 2.5s | 2.5-4.0s | > 4.0s |
42
+ | FID (First Input Delay) | < 100ms | 100-300ms | > 300ms |
43
+ | CLS (Cumulative Layout Shift) | < 0.1 | 0.1-0.25 | > 0.25 |
44
+ | INP (Interaction to Next Paint) | < 200ms | 200-500ms | > 500ms |
45
+ | TTFB (Time to First Byte) | < 800ms | 800-1800ms | > 1800ms |
46
+
47
+ ### 1.2 WebPageTest 审计
48
+
49
+ ```bash
50
+ # 使用 WebPageTest API
51
+ curl -X POST "https://www.webpagetest.org/runtest.php" \
52
+ -d "url=https://example.com" \
53
+ -d "f=json" \
54
+ -d "runs=3" \
55
+ -d "fvonly=1" \
56
+ -d "location=ec2-ap-northeast-1.3GFast" \
57
+ -d "k=YOUR_API_KEY"
58
+ ```
59
+
60
+ **重点关注**：
61
+ - Waterfall 瀑布图：识别阻塞资源
62
+ - filmstrip 胶片视图：确认视觉加载过程
63
+ - 请求数与传输体积
64
+ - TTFB 与服务端响应时间
65
+
66
+ ### 1.3 Chrome DevTools 性能分析
67
+
68
+ ```
69
+ Performance 面板：
70
+ 1. 录制页面加载 → 分析 Main 线程长任务（> 50ms）
71
+ 2. 检查 Layout Shift 区域
72
+ 3. 识别 Scripting / Rendering / Painting 占比
73
+
74
+ Network 面板：
75
+ 1. 启用 Slow 3G 节流 → 观察资源加载顺序
76
+ 2. 按 Size 排序 → 定位大文件
77
+ 3. 检查 Cache-Control 头
78
+ ```
79
+
80
+ ---
81
+
82
+ ## 2. 关键渲染路径优化
83
+
84
+ ### 2.1 消除渲染阻塞资源
85
+
86
+ ```html
87
+ <!-- 错误：阻塞渲染的 CSS -->
88
+ <link rel="stylesheet" href="/styles/non-critical.css">
89
+
90
+ <!-- 正确：关键 CSS 内联 + 非关键 CSS 异步加载 -->
91
+ <style>
92
+ /* 首屏关键 CSS，通过 critical 工具提取 */
93
+ .hero { display: flex; min-height: 100vh; }
94
+ .nav { position: sticky; top: 0; }
95
+ </style>
96
+ <link rel="preload" href="/styles/non-critical.css" as="style"
97
+ onload="this.onload=null;this.rel='stylesheet'">
98
+ <noscript>
99
+ <link rel="stylesheet" href="/styles/non-critical.css">
100
+ </noscript>
101
+ ```
102
+
103
+ ```bash
104
+ # 使用 critical 提取关键 CSS
105
+ npx critical index.html \
106
+ --base ./ \
107
+ --inline \
108
+ --minify \
109
+ --width 1300 \
110
+ --height 900 \
111
+ > index-optimized.html
112
+ ```
113
+
114
+ ### 2.2 脚本加载策略
115
+
116
+ ```html
117
+ <!-- 关键脚本：同步加载（仅限必要的少量代码） -->
118
+ <script src="/js/critical.js"></script>
119
+
120
+ <!-- 非关键脚本：延迟加载 -->
121
+ <script defer src="/js/app.js"></script>
122
+
123
+ <!-- 完全独立的脚本：异步加载 -->
124
+ <script async src="/js/analytics.js"></script>
125
+
126
+ <!-- 模块脚本：默认 defer 行为 -->
127
+ <script type="module" src="/js/app.mjs"></script>
128
+ ```
129
+
130
+ ### 2.3 资源提示（Resource Hints）
131
+
132
+ ```html
133
+ <head>
134
+ <!-- DNS 预解析 -->
135
+ <link rel="dns-prefetch" href="//cdn.example.com">
136
+
137
+ <!-- 预连接（DNS + TCP + TLS） -->
138
+ <link rel="preconnect" href="https://api.example.com" crossorigin>
139
+
140
+ <!-- 预加载关键资源 -->
141
+ <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font"
142
+ type="font/woff2" crossorigin>
143
+ <link rel="preload" href="/hero.webp" as="image"
144
+ fetchpriority="high">
145
+
146
+ <!-- 预取下一页资源 -->
147
+ <link rel="prefetch" href="/next-page.js">
148
+ </head>
149
+ ```
150
+
151
+ ---
152
+
153
+ ## 3. 资源优化
154
+
155
+ ### 3.1 图片优化
156
+
157
+ ```bash
158
+ # 批量转换为 WebP
159
+ for f in *.{png,jpg}; do
160
+ cwebp -q 80 "$f" -o "${f%.*}.webp"
161
+ done
162
+
163
+ # 生成 AVIF（更高压缩率）
164
+ npx avif --input="src/images/*.{png,jpg}" --output="dist/images" --quality=50
165
+
166
+ # 生成响应式图片
167
+ npx sharp-cli resize 400 --input hero.jpg --output hero-400.jpg
168
+ npx sharp-cli resize 800 --input hero.jpg --output hero-800.jpg
169
+ npx sharp-cli resize 1200 --input hero.jpg --output hero-1200.jpg
170
+ ```
171
+
172
+ ```html
173
+ <!-- 响应式图片 + 现代格式 -->
174
+ <picture>
175
+ <source srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
176
+ type="image/avif" sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px">
177
+ <source srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
178
+ type="image/webp" sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px">
179
+ <img src="hero-800.jpg" alt="Hero image"
180
+ loading="lazy" decoding="async"
181
+ width="1200" height="600">
182
+ </picture>
183
+
184
+ <!-- 首屏图片：禁用 lazy，提高优先级 -->
185
+ <img src="hero.webp" alt="Hero" fetchpriority="high"
186
+ width="1200" height="600">
187
+ ```
188
+
189
+ ### 3.2 字体优化
190
+
191
+ ```css
192
+ /* 字体显示策略 */
193
+ @font-face {
194
+ font-family: 'Inter';
195
+ src: url('/fonts/Inter-Regular.woff2') format('woff2');
196
+ font-weight: 400;
197
+ font-style: normal;
198
+ font-display: swap; /* 先显示后备字体，加载后替换 */
199
+ unicode-range: U+0000-00FF; /* 仅加载拉丁字符子集 */
200
+ }
201
+
202
+ /* 中文字体子集化 */
203
+ @font-face {
204
+ font-family: 'NotoSansSC';
205
+ src: url('/fonts/NotoSansSC-Regular-subset.woff2') format('woff2');
206
+ font-display: swap;
207
+ unicode-range: U+4E00-9FFF; /* CJK 统一汉字 */
208
+ }
209
+ ```
210
+
211
+ ```bash
212
+ # 字体子集化（仅保留使用到的字符）
213
+ pip install fonttools brotli
214
+ pyftsubset NotoSansSC-Regular.ttf \
215
+ --text-file=used-chars.txt \
216
+ --output-file=NotoSansSC-subset.woff2 \
217
+ --flavor=woff2
218
+ ```
219
+
220
+ ### 3.3 CSS 优化
221
+
222
+ ```bash
223
+ # 移除未使用的 CSS（PurgeCSS）
224
+ npx purgecss \
225
+ --css dist/styles.css \
226
+ --content 'dist/**/*.html' 'dist/**/*.js' \
227
+ --output dist/styles.purged.css
228
+
229
+ # CSS 压缩（cssnano）
230
+ npx postcss dist/styles.css -o dist/styles.min.css --use cssnano
231
+ ```
232
+
233
+ ### 3.4 JavaScript 优化
234
+
235
+ ```bash
236
+ # 分析打包体积
237
+ npx webpack-bundle-analyzer dist/stats.json
238
+
239
+ # Vite 项目分析
240
+ npx vite-bundle-visualizer
241
+
242
+ # Tree-shaking 验证：确认 sideEffects 配置
243
+ # package.json
244
+ {
245
+ "sideEffects": false
246
+ }
247
+ # 或指定有副作用的文件
248
+ {
249
+ "sideEffects": ["*.css", "./src/polyfills.js"]
250
+ }
251
+ ```
252
+
253
+ ---
254
+
255
+ ## 4. 代码分割
256
+
257
+ ### 4.1 路由级分割（React）
258
+
259
+ ```tsx
260
+ import { lazy, Suspense } from 'react';
261
+ import { Routes, Route } from 'react-router-dom';
262
+
263
+ // 路由级懒加载
264
+ const Dashboard = lazy(() => import('./pages/Dashboard'));
265
+ const Settings = lazy(() => import('./pages/Settings'));
266
+ const Reports = lazy(() => import(
267
+ /* webpackChunkName: "reports" */
268
+ /* webpackPrefetch: true */
269
+ './pages/Reports'
270
+ ));
271
+
272
+ function App() {
273
+ return (
274
+ <Suspense fallback={<PageSkeleton />}>
275
+ <Routes>
276
+ <Route path="/" element={<Dashboard />} />
277
+ <Route path="/settings" element={<Settings />} />
278
+ <Route path="/reports" element={<Reports />} />
279
+ </Routes>
280
+ </Suspense>
281
+ );
282
+ }
283
+ ```
284
+
285
+ ### 4.2 组件级分割
286
+
287
+ ```tsx
288
+ import { lazy, Suspense, useState } from 'react';
289
+
290
+ // 仅在用户交互后加载重量级组件
291
+ const HeavyChart = lazy(() => import('./components/HeavyChart'));
292
+ const MarkdownEditor = lazy(() => import('./components/MarkdownEditor'));
293
+
294
+ function Dashboard() {
295
+ const [showChart, setShowChart] = useState(false);
296
+
297
+ return (
298
+ <div>
299
+ <button onClick={() => setShowChart(true)}>显示图表</button>
300
+ {showChart && (
301
+ <Suspense fallback={<ChartSkeleton />}>
302
+ <HeavyChart data={data} />
303
+ </Suspense>
304
+ )}
305
+ </div>
306
+ );
307
+ }
308
+ ```
309
+
310
+ ### 4.3 Vite 分割策略
311
+
312
+ ```ts
313
+ // vite.config.ts
314
+ export default defineConfig({
315
+ build: {
316
+ rollupOptions: {
317
+ output: {
318
+ manualChunks: {
319
+ 'vendor-react': ['react', 'react-dom', 'react-router-dom'],
320
+ 'vendor-charts': ['recharts', 'd3'],
321
+ 'vendor-utils': ['lodash-es', 'date-fns'],
322
+ },
323
+ },
324
+ },
325
+ chunkSizeWarningLimit: 500, // KB
326
+ },
327
+ });
328
+ ```
329
+
330
+ ---
331
+
332
+ ## 5. 懒加载
333
+
334
+ ### 5.1 图片懒加载
335
+
336
+ ```tsx
337
+ // 原生懒加载
338
+ <img src="photo.webp" loading="lazy" alt="Photo" width="400" height="300" />
339
+
340
+ // Intersection Observer 自定义实现
341
+ function useLazyImage(src: string) {
342
+ const [loaded, setLoaded] = useState(false);
343
+ const ref = useRef<HTMLImageElement>(null);
344
+
345
+ useEffect(() => {
346
+ const observer = new IntersectionObserver(
347
+ ([entry]) => {
348
+ if (entry.isIntersecting) {
349
+ setLoaded(true);
350
+ observer.disconnect();
351
+ }
352
+ },
353
+ { rootMargin: '200px' } // 提前 200px 开始加载
354
+ );
355
+ if (ref.current) observer.observe(ref.current);
356
+ return () => observer.disconnect();
357
+ }, []);
358
+
359
+ return { ref, src: loaded ? src : undefined };
360
+ }
361
+ ```
362
+
363
+ ### 5.2 无限滚动懒加载
364
+
365
+ ```tsx
366
+ function useInfiniteScroll(fetchMore: () => Promise<void>) {
367
+ const sentinelRef = useRef<HTMLDivElement>(null);
368
+
369
+ useEffect(() => {
370
+ const observer = new IntersectionObserver(
371
+ ([entry]) => {
372
+ if (entry.isIntersecting) {
373
+ fetchMore();
374
+ }
375
+ },
376
+ { threshold: 0.1 }
377
+ );
378
+ if (sentinelRef.current) observer.observe(sentinelRef.current);
379
+ return () => observer.disconnect();
380
+ }, [fetchMore]);
381
+
382
+ return sentinelRef;
383
+ }
384
+
385
+ // 使用
386
+ function ProductList() {
387
+ const sentinelRef = useInfiniteScroll(loadNextPage);
388
+ return (
389
+ <>
390
+ {products.map(p => <ProductCard key={p.id} product={p} />)}
391
+ <div ref={sentinelRef} style={{ height: 1 }} />
392
+ </>
393
+ );
394
+ }
395
+ ```
396
+
397
+ ---
398
+
399
+ ## 6. 缓存策略
400
+
401
+ ### 6.1 HTTP 缓存
402
+
403
+ ```nginx
404
+ # Nginx 缓存配置
405
+ location /assets/ {
406
+ # 静态资源：强缓存 1 年（文件名含 hash）
407
+ add_header Cache-Control "public, max-age=31536000, immutable";
408
+ }
409
+
410
+ location /index.html {
411
+ # HTML 入口：协商缓存
412
+ add_header Cache-Control "no-cache";
413
+ etag on;
414
+ }
415
+
416
+ location /api/ {
417
+ # API 响应：不缓存或短期缓存
418
+ add_header Cache-Control "private, no-cache, must-revalidate";
419
+ }
420
+ ```
421
+
422
+ ### 6.2 Service Worker 缓存
423
+
424
+ ```js
425
+ // sw.js - Workbox 策略
426
+ import { precacheAndRoute } from 'workbox-precaching';
427
+ import { registerRoute } from 'workbox-routing';
428
+ import { CacheFirst, StaleWhileRevalidate, NetworkFirst } from 'workbox-strategies';
429
+ import { ExpirationPlugin } from 'workbox-expiration';
430
+
431
+ // 预缓存构建产物
432
+ precacheAndRoute(self.__WB_MANIFEST);
433
+
434
+ // 字体/图片：CacheFirst
435
+ registerRoute(
436
+ ({ request }) => request.destination === 'font' || request.destination === 'image',
437
+ new CacheFirst({
438
+ cacheName: 'static-assets',
439
+ plugins: [new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 30 * 24 * 3600 })],
440
+ })
441
+ );
442
+
443
+ // API 数据：NetworkFirst
444
+ registerRoute(
445
+ ({ url }) => url.pathname.startsWith('/api/'),
446
+ new NetworkFirst({
447
+ cacheName: 'api-cache',
448
+ networkTimeoutSeconds: 3,
449
+ plugins: [new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 5 * 60 })],
450
+ })
451
+ );
452
+ ```
453
+
454
+ ---
455
+
456
+ ## 7. CDN 配置
457
+
458
+ ### 7.1 多 CDN 回源策略
459
+
460
+ ```ts
461
+ // CDN URL 构建
462
+ const CDN_HOSTS = [
463
+ 'https://cdn1.example.com',
464
+ 'https://cdn2.example.com',
465
+ ];
466
+
467
+ function getCdnUrl(path: string, index: number = 0): string {
468
+ const host = CDN_HOSTS[index % CDN_HOSTS.length];
469
+ return `${host}${path}`;
470
+ }
471
+
472
+ // 图片 CDN（支持参数化裁剪/格式转换）
473
+ function getImageUrl(key: string, width: number, format: 'webp' | 'avif' = 'webp'): string {
474
+ return `https://img-cdn.example.com/${key}?w=${width}&fmt=${format}&q=80`;
475
+ }
476
+ ```
477
+
478
+ ### 7.2 Vite CDN 外部化
479
+
480
+ ```ts
481
+ // vite.config.ts
482
+ import { defineConfig } from 'vite';
483
+
484
+ export default defineConfig({
485
+ build: {
486
+ rollupOptions: {
487
+ external: ['react', 'react-dom'],
488
+ output: {
489
+ globals: {
490
+ react: 'React',
491
+ 'react-dom': 'ReactDOM',
492
+ },
493
+ },
494
+ },
495
+ },
496
+ });
497
+ ```
498
+
499
+ ---
500
+
501
+ ## 8. 性能监控（Web Vitals）
502
+
503
+ ### 8.1 采集 Web Vitals
504
+
505
+ ```ts
506
+ import { onCLS, onFID, onLCP, onINP, onTTFB } from 'web-vitals';
507
+
508
+ interface PerfMetric {
509
+ name: string;
510
+ value: number;
511
+ rating: 'good' | 'needs-improvement' | 'poor';
512
+ navigationType: string;
513
+ }
514
+
515
+ function sendToAnalytics(metric: PerfMetric) {
516
+ const body = JSON.stringify(metric);
517
+
518
+ // 优先 sendBeacon，确保页面卸载时也能发送
519
+ if (navigator.sendBeacon) {
520
+ navigator.sendBeacon('/api/vitals', body);
521
+ } else {
522
+ fetch('/api/vitals', { body, method: 'POST', keepalive: true });
523
+ }
524
+ }
525
+
526
+ onCLS(sendToAnalytics);
527
+ onFID(sendToAnalytics);
528
+ onLCP(sendToAnalytics);
529
+ onINP(sendToAnalytics);
530
+ onTTFB(sendToAnalytics);
531
+ ```
532
+
533
+ ### 8.2 自定义性能标记
534
+
535
+ ```ts
536
+ // 标记关键业务节点
537
+ performance.mark('data-fetch-start');
538
+ const data = await fetchDashboardData();
539
+ performance.mark('data-fetch-end');
540
+ performance.measure('dashboard-data-fetch', 'data-fetch-start', 'data-fetch-end');
541
+
542
+ // 获取测量结果
543
+ const [measure] = performance.getEntriesByName('dashboard-data-fetch');
544
+ console.log(`数据加载耗时: ${measure.duration.toFixed(0)}ms`);
545
+
546
+ // 长任务监控
547
+ const observer = new PerformanceObserver((list) => {
548
+ for (const entry of list.getEntries()) {
549
+ if (entry.duration > 50) {
550
+ console.warn(`长任务检测: ${entry.duration.toFixed(0)}ms`, entry);
551
+ }
552
+ }
553
+ });
554
+ observer.observe({ type: 'longtask', buffered: true });
555
+ ```
556
+
557
+ ---
558
+
559
+ ## 9. 性能预算
560
+
561
+ ### 9.1 预算定义
562
+
563
+ ```json
564
+ // budget.json
565
+ [
566
+ {
567
+ "resourceSizes": [
568
+ { "resourceType": "script", "budget": 300 },
569
+ { "resourceType": "stylesheet", "budget": 50 },
570
+ { "resourceType": "image", "budget": 500 },
571
+ { "resourceType": "font", "budget": 100 },
572
+ { "resourceType": "total", "budget": 1000 }
573
+ ],
574
+ "resourceCounts": [
575
+ { "resourceType": "third-party", "budget": 10 },
576
+ { "resourceType": "script", "budget": 15 }
577
+ ],
578
+ "timings": [
579
+ { "metric": "interactive", "budget": 3000 },
580
+ { "metric": "first-contentful-paint", "budget": 1500 },
581
+ { "metric": "largest-contentful-paint", "budget": 2500 }
582
+ ]
583
+ }
584
+ ]
585
+ ```
586
+
587
+ ### 9.2 CI 中强制执行预算
588
+
589
+ ```yaml
590
+ # .github/workflows/perf-budget.yml
591
+ name: Performance Budget
592
+ on: [pull_request]
593
+
594
+ jobs:
595
+ budget-check:
596
+ runs-on: ubuntu-latest
597
+ steps:
598
+ - uses: actions/checkout@v4
599
+ - run: npm ci && npm run build
600
+
601
+ - name: Check bundle size
602
+ run: |
603
+ MAX_JS=300 # KB
604
+ MAX_CSS=50 # KB
605
+ JS_SIZE=$(du -sk dist/assets/*.js | awk '{sum+=$1} END {print sum}')
606
+ CSS_SIZE=$(du -sk dist/assets/*.css | awk '{sum+=$1} END {print sum}')
607
+ echo "JS: ${JS_SIZE}KB (budget: ${MAX_JS}KB)"
608
+ echo "CSS: ${CSS_SIZE}KB (budget: ${MAX_CSS}KB)"
609
+ if [ "$JS_SIZE" -gt "$MAX_JS" ]; then
610
+ echo "::error::JS bundle exceeds budget: ${JS_SIZE}KB > ${MAX_JS}KB"
611
+ exit 1
612
+ fi
613
+
614
+ - name: Lighthouse CI
615
+ uses: treosh/lighthouse-ci-action@v11
616
+ with:
617
+ budgetPath: ./budget.json
618
+ uploadArtifacts: true
619
+ runs: 3
620
+ ```
621
+
622
+ ### 9.3 bundlesize 集成
623
+
624
+ ```json
625
+ // package.json
626
+ {
627
+ "bundlesize": [
628
+ { "path": "dist/assets/index-*.js", "maxSize": "150 kB", "compression": "gzip" },
629
+ { "path": "dist/assets/vendor-*.js", "maxSize": "100 kB", "compression": "gzip" },
630
+ { "path": "dist/assets/index-*.css", "maxSize": "30 kB", "compression": "gzip" }
631
+ ]
632
+ }
633
+ ```
634
+
635
+ ---
636
+
637
+ ## 10. 运行时性能优化
638
+
639
+ ### 10.1 避免强制同步布局
640
+
641
+ ```ts
642
+ // 错误：读写交替触发强制回流
643
+ elements.forEach(el => {
644
+ const height = el.offsetHeight; // 读
645
+ el.style.height = height * 2 + 'px'; // 写 → 触发回流
646
+ });
647
+
648
+ // 正确：批量读，批量写
649
+ const heights = elements.map(el => el.offsetHeight); // 批量读
650
+ elements.forEach((el, i) => {
651
+ el.style.height = heights[i] * 2 + 'px'; // 批量写
652
+ });
653
+ ```
654
+
655
+ ### 10.2 虚拟滚动
656
+
657
+ ```tsx
658
+ import { useVirtualizer } from '@tanstack/react-virtual';
659
+
660
+ function VirtualList({ items }: { items: Item[] }) {
661
+ const parentRef = useRef<HTMLDivElement>(null);
662
+
663
+ const virtualizer = useVirtualizer({
664
+ count: items.length,
665
+ getScrollElement: () => parentRef.current,
666
+ estimateSize: () => 50,
667
+ overscan: 5,
668
+ });
669
+
670
+ return (
671
+ <div ref={parentRef} style={{ height: 600, overflow: 'auto' }}>
672
+ <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
673
+ {virtualizer.getVirtualItems().map(virtualRow => (
674
+ <div key={virtualRow.key}
675
+ style={{
676
+ position: 'absolute',
677
+ top: 0,
678
+ transform: `translateY(${virtualRow.start}px)`,
679
+ height: virtualRow.size,
680
+ }}>
681
+ <ItemRow item={items[virtualRow.index]} />
682
+ </div>
683
+ ))}
684
+ </div>
685
+ </div>
686
+ );
687
+ }
688
+ ```
689
+
690
+ ---
691
+
692
+ ## Agent Checklist
693
+
694
+ - [ ] 使用 Lighthouse CLI 或 DevTools 完成首次审计，记录基线分数
695
+ - [ ] 提取并内联关键 CSS，非关键 CSS 异步加载
696
+ - [ ] 所有非关键脚本使用 `defer` 或 `async`
697
+ - [ ] 图片已转换为 WebP/AVIF 并提供响应式 srcset
698
+ - [ ] 字体使用 `font-display: swap` 并完成子集化
699
+ - [ ] 移除未使用的 CSS（PurgeCSS）
700
+ - [ ] 路由级和组件级代码分割已实施
701
+ - [ ] 首屏外图片和组件已启用懒加载
702
+ - [ ] HTTP 缓存头已正确配置（hash 资源强缓存，HTML 协商缓存）
703
+ - [ ] Web Vitals 采集已部署，数据可在监控平台查看
704
+ - [ ] 性能预算已定义并集成到 CI
705
+ - [ ] 长列表使用虚拟滚动
706
+ - [ ] 无强制同步布局（Layout Thrashing）
707
+ - [ ] bundle 分析已执行，无明显冗余依赖