優化

測試環境

private tab
react prod mode(打包完後用 vite preview run)
disable cache

測試頁面

Home(目的是為了在排除掉其他功能性api的情況下(盡可能地排除後端api速度慢的問題)，來找出影響lighthosue, FCP, LCP的原因)

[before.pdf](https://pdfhost.io/v/aFooUIaxE_beforeMB)

[after.pdf](https://pdfhost.io/v/bY8l77dLZ_afterOptimization)

可以看到在reduce unused JS的部分有明顯提升。至於分數還是如此低的部分是因為測試的頁面是home，而在home的頁面裡有很多jpg的圖檔所以分數才會這麼低。

---

下載的套件

rollup-plugin-visualizer
(非常好用的套件，用來視覺化bundle size)


---

優化方法：

目標： 解決bundle size太大得問題

1. rollup up manualchunks
把bundle size太大的套件切分成小的chunk

2. lazy load
初步的lazy loading從routes開始，在routes的部分新增react lazy load。
未來可以優先處理的地方為smartContract的部分，因為那裡用到大量math.js計算所以bundle size非常的大。