二次封裝 Highcharts 組件,傳入對應的配置項就能快速的產出符合 UI 畫面的圖表。
後端傳回來的數據格式不會符合 Highcharts 的規範,客製化一個 hook ,快速產生出符合要求的數據格式。
參考 React Material UI 組件庫,封裝數十個通用組件,並用 Storybook 管理組件。
將客製化的 Table 組件,結合虛擬列表功能,對後端返回的大量數據進行渲染優化。
使用 RTK query 緩存請求過的 API 數據,避免發出重複的網路請求,同時也加速數據可視化的載入速度。
整合 Lighthouse-CI 與 GitHub Action 進行性能監控,每一次 commit 時,都能檢測出性能指標分數的變化。
整合 MSW(Mock Service Worker),當性能指標分數下降時,透過 MSW 檢測下降的原因是不是 API 回應速度變慢所造成。
通過 Webpack Bundle Analyzer,對體積過大的模塊進行優化,拆出第三方模塊進行構建緩存。
結合 Google Analytics 追蹤流量監控,訪問率不高的頁面採用異步加載,減少 bundle 的大小。
整合 Firebase Auth SDK。