動作
Fix #170
進行中
SC
SC
首頁載入效能優化 — next/dynamic lazy loading 實作
Fix #170:
首頁載入效能優化 — next/dynamic lazy loading 實作
開始日期:
2026-02-16
完成日期:
2026-02-16 (逾期 46 天)
完成比例:
100%
預估工時:
1:00 小時
概述
h1. 問題描述
重新載入頁面時長時間白畫面(~13.5 秒),工作管理員顯示 Node.js 佔用大量 CPU。
根因:TraumaAssessment.tsx 同步 import 全部 4 個 tab 元件(合計 ~6,800+ 行),
無任何 code splitting,所有元件在首次載入時一次性編譯。
h1. 修改內容
h2. TraumaAssessment.tsx
- 移除 PatientHistoryForm、SoftTissueTab、SkeletalTab、ReviewTab 的同步 import
- 改用
next/dynamiclazy import(ssr: false) - 新增 TabLoading 元件作為載入中 fallback(Loader2 spinning icon)
- 各 tab 在使用者切換時才按需載入
h2. page.tsx
- TraumaAssessmentForm 改為 lazy import(認證後才載入)
- UserSettingsModal 改為 lazy import(點擊設定按鈕才載入)
h2. CLAUDE.md
- 更新 Known Issues 修正進度
h1. 預期效果
- 未認證:只載入 Login 元件,不下載表單程式碼
- 認證後:只編譯當前顯示的 tab,其餘 tab 切換時按需載入
- production build 驗證通過(4.3 秒編譯完成)
沒有任何資料可供顯示
動作