From ae5ce358028de74b591392d7e4ae8d0d16a17e1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=BF=90=E7=BB=B4=E5=B7=A5=E7=A8=8B=E5=B8=88?= Date: Sun, 12 Jul 2026 01:05:54 +0800 Subject: [PATCH 1/7] =?UTF-8?q?[WS-86]=20frontend:=20=E9=A6=96=E5=B1=8F?= =?UTF-8?q?=E4=B8=8E=E6=B8=B2=E6=9F=93=E6=80=A7=E8=83=BD=E4=BC=98=E5=8C=96?= =?UTF-8?q?=EF=BC=88FA=20=E9=9D=9E=E9=98=BB=E5=A1=9E=E8=87=AA=E6=89=98?= =?UTF-8?q?=E7=AE=A1=20/=20=E9=AA=A8=E6=9E=B6=E5=B1=8F+=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E5=88=86=E5=9D=97=20/=20react-markdown=20=E6=87=92=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1) Font Awesome：删除 里 cdnjs 的渲染阻塞外链，改自托管 /lib/font-awesome（woff2-only），用 media=print+onload 非阻塞加载（noscript 兜底）。首屏不再被 0.6–16s 的跨域 FA CSS 阻塞。 2) 重页面：AnalysisResults 改 next/dynamic 代码分块 + 新增骨架屏，路由切换不再白屏再弹出；/analysis、/history/detail First Load JS 196→139kB。 3) react-markdown：MessageBubble/ReportCard/AnalysisResults 共 9 处改为 LazyMarkdown（next/dynamic），react-markdown+remark/rehype 移入按需 chunk（45kB gzip），首页首屏 JS 183→147kB。 build ✓ / typecheck(本次文件) ✓ / vitest 38 passed。运行时 Lighthouse 因沙箱 Chromium 无法连 localhost 未能采集，已附 QA 复测步骤（issues/WS-86/perf-data.md）。 Co-authored-by: multica-agent --- web/frontend/issues/WS-86/CHANGES.md | 37 ++++++++ web/frontend/issues/WS-86/perf-data.md | 85 ++++++++++++++++++ .../public/lib/font-awesome/README.md | 17 ++++ .../public/lib/font-awesome/css/all.min.css | 9 ++ .../font-awesome/webfonts/fa-brands-400.woff2 | Bin 0 -> 108020 bytes .../webfonts/fa-regular-400.woff2 | Bin 0 -> 24948 bytes .../font-awesome/webfonts/fa-solid-900.woff2 | Bin 0 -> 150124 bytes .../webfonts/fa-v4compatibility.woff2 | Bin 0 -> 4564 bytes web/frontend/src/app/analysis/page.tsx | 11 ++- web/frontend/src/app/history/detail/page.tsx | 11 ++- web/frontend/src/app/layout.tsx | 19 +++- .../components/analysis/AnalysisResults.tsx | 58 +++++------- .../analysis/AnalysisResultsSkeleton.test.tsx | 11 +++ .../analysis/AnalysisResultsSkeleton.tsx | 48 ++++++++++ .../src/components/analysis/ReportCard.tsx | 5 +- .../src/components/common/LazyMarkdown.tsx | 26 ++++++ .../src/components/common/Markdown.test.tsx | 39 ++++++++ .../src/components/common/Markdown.tsx | 50 +++++++++++ .../components/conversation/MessageBubble.tsx | 7 +- 19 files changed, 386 insertions(+), 47 deletions(-) create mode 100644 web/frontend/issues/WS-86/CHANGES.md create mode 100644 web/frontend/issues/WS-86/perf-data.md create mode 100644 web/frontend/public/lib/font-awesome/README.md create mode 100644 web/frontend/public/lib/font-awesome/css/all.min.css create mode 100644 web/frontend/public/lib/font-awesome/webfonts/fa-brands-400.woff2 create mode 100644 web/frontend/public/lib/font-awesome/webfonts/fa-regular-400.woff2 create mode 100644 web/frontend/public/lib/font-awesome/webfonts/fa-solid-900.woff2 create mode 100644 web/frontend/public/lib/font-awesome/webfonts/fa-v4compatibility.woff2 create mode 100644 web/frontend/src/components/analysis/AnalysisResultsSkeleton.test.tsx create mode 100644 web/frontend/src/components/analysis/AnalysisResultsSkeleton.tsx create mode 100644 web/frontend/src/components/common/LazyMarkdown.tsx create mode 100644 web/frontend/src/components/common/Markdown.test.tsx create mode 100644 web/frontend/src/components/common/Markdown.tsx diff --git a/web/frontend/issues/WS-86/CHANGES.md b/web/frontend/issues/WS-86/CHANGES.md new file mode 100644 index 0000000..39058f6 --- /dev/null +++ b/web/frontend/issues/WS-86/CHANGES.md @@ -0,0 +1,37 @@ +# WS-86 改动清单 + +分支：`perf/frontend-first-screen`（基于 `main`）。只动前端 `web/frontend/`，不涉及后端 / API 契约 / 框架 / SSR。 + +## 任务 1：Font Awesome 非阻塞化（自托管） + +- `web/frontend/src/app/layout.tsx` — 删除 `` 里指向 `cdnjs.cloudflare.com` 的渲染阻塞外链 ``，改为自托管 `/lib/font-awesome/css/all.min.css`，用 `media="print"` + `onload` 切 `all` 的内联脚本非阻塞加载（`