從前端角度打造高性能電商網站（下集）

文、Raymond

 

延續上集我們對於電商網站前端效能上的探討，本篇則將以React為例，從組件的效能優化到行動裝置上的體驗改善等等，講述我們在前端開發時的實戰層面上會運用到的技巧。

 

 

React Component上的優化技巧

 

最常見的前端效能問題經常會出現在商品列表頁面，當商品數量超過一定數量時（例如50～100個），頁面滾動就可能會開始卡頓，單純就是在動態渲染的網頁中，當有大量渲染事件發生時就可能造成的效能議題，而這有個常見的解決方法：使用React.memo包裝商品卡片組件。

 

圖片來源：medium

 

而當頁面需要陳列的數量大到一個程度時，即便包了memo也是很容易遇到效能瓶頸，此時虛擬滾動的技術變出現了，我們上一期在講述效能相關的解決方案中也有提到。

 

圖片來源：web.dev

 

這邊便來舉一個實用的函式庫：react-window，以下是大致上的範例：

 

 

可以看到這個套件其實非常簡單易用就能達到我們所需的效果，而且由於是官方推薦套件，更新的頻率也不低，也更不用擔心往後框架推陳出新時版本跟不上，如果需要更為複雜的功能，也能考慮使用react-virtualized。

 

 

資料快取與同步：實用的狀態管理

 

由於React的資料流特殊性，要如何去處理跨元件的狀態就十分重要了，電電商網站的複雜度更是遠超一般應用，需要處理商品資料、使用者狀態、購物車內容、篩選條件等多層次資料。而對於初學者而言，選擇合適的狀態管理工具更是成功的關鍵。

 

圖片來源：javascript.plainenglish.io

 

SWR vs TanStack Query (React Query)

這兩個都是優秀的資料獲取函式庫，相比傳統的Redux更適合處理伺服器狀態。SWR以其簡潔的API著稱，只需要一行程式碼就能實現自動快取、背景重新驗證和錯誤重試。TanStack Query則提供更豐富的功能，包括更細緻的快取控制、樂觀更新、離線支援等，特別適合需要複雜資料同步的電商場景。

 

Zustand vs Redux Toolkit

對於客戶端狀態管理，Zustand提供了極其簡潔的語法，不需要大量的樣板程式碼，特別適合管理購物車、使用者偏好設定等簡單狀態。Redux Toolkit則是Redux的現代化版本，雖然學習曲線較陡，但在大型電商專案中提供了更強的可預測性和除錯能力。

 

不同的狀態管理工具對效能的影響差異很大。Redux的不可變更新機制雖然提供了很好的可預測性，但在處理大量商品資料時可能造成不必要的重渲染。Zustand採用了更現代的狀態訂閱機制，只有真正依賴該狀態的組件才會重新渲染。

對於電商網站而言，商品列表、篩選器、購物車這些不同的功能模組應該使用獨立的狀態管理策略。商品資料適合用SWR進行伺服器狀態管理，購物車適合用Zustand進行客戶端狀態管理，複雜的篩選邏輯可能需要結合useReducer進行本地狀態處理。這種混合式的架構能夠充分發揮各個工具的優勢，避免單一工具的局限性。

 

 

購物車同步的最佳實踐

 

購物車是電商網站最關鍵的狀態之一，需要兼顧即時性、可靠性和跨裝置同步。現代的做法是採用「樂觀更新」策略，使用者操作立即反映在介面上，同時在背景進行伺服器同步。

對於已登入使用者，購物車資料應該優先從伺服器載入，確保跨裝置的一致性。對於訪客，可以先使用localStorage儲存，等使用者註冊或登入後再進行資料合併。使用WebSocket或Server-Sent Events可以實現即時的購物車同步，當使用者在多個分頁操作時能保持狀態一致。

 

 

透過這些具體且容易實作的技巧，即使是初學者也能夠快速改善電商網站的效能表現。重要的是先從影響最大的部分開始優化，比如商品列表的渲染效能和圖片載入策略，這些改善往往能帶來最明顯的使用者體驗提升，每一個小改善累積起來就能創造出優秀的電商網站，若對這些電商網頁設計的細節或技術有興趣，也可以填寫表單預約了解課程。

 

 

加入菜鳥救星學習會員，不定期獲得更多知識吧！點我註冊 / 登入

 

不同頻道，不同知識 ！