成果與影響
產品數位化
20,000+ SKU 全面上線；2,922 張產品圖自動遷移至 CDN
效能提升
首屏載入 < 1.5 秒；API P95 回應時間 < 500ms；圖片壓縮節省 60%+ 頻寬
業務轉型
從傳統 B2B 純線下報價模式，成功轉型為具備完整購物流程的 B2C 電商平台，大幅降低業務人力依賴
專案背景
屏果園（Screen Orchard）是一家專注於 LCD 面板及電子零組件的台灣企業，長期以 B2B 模式服務下游客戶。公司內部使用 ERP 系統管理產品料號、庫存與報價，但對外仍依賴人工報價與 Email 往來，缺乏面向終端客戶的數位通路。隨著市場競爭加劇與客戶數位化期待提升，屏果園決定打造一套完整的 B2C 電商平台，讓客戶自助完成產品瀏覽到下單的完整流程，同時將內部 ERP 資料無縫同步到前台，確保產品資訊即時準確。
挑戰與解法
Pain Point 01
內部 ERP 資料封閉，無法對外展示
核心產品資料全部存放在內部 ERP 系統中，包含產品基本資料、產品圖片與相似產品關聯，這些資料僅供內部系統使用，無法直接對外提供服務。
Solution 01
自動化資料同步管線
設計並建置自動同步管線，每日定時將內部 ERP 產品資料、2,922 張產品圖片與相似產品關聯自動同步至雲端資料庫與 CDN 儲存空間，實現零人工介入的資料更新。
Pain Point 02
缺乏面向終端客戶的數位通路
公司沒有自己的電商網站，客戶只能透過電話、Email 或業務人員取得報價與下單，流程冗長且容易出錯。
Solution 02
全功能 B2C 電商平台
打造現代化電商平台，涵蓋產品目錄（分頁瀏覽、品牌/類別篩選、全文搜尋）、產品內頁（多圖輪播、規格解析、相似商品推薦）、購物車（本地持久化、即時數量調整）、完整結帳流程、使用者中心、即時客服聊天室與 CMS 管理後台。
Pain Point 03
產品圖片載入緩慢，行動裝置體驗差
原始產品圖片為未壓縮格式且無 CDN 分發。在行動裝置上圖片載入時間過長，嚴重影響使用體驗與 SEO 表現。
Solution 03
智慧圖片優化與 CDN 架構
產品圖片自動轉換為 AVIF/WebP 格式（節省 60%+ 頻寬），搭配響應式 srcset 自動裁切尺寸與 24 小時 CDN 快取。統一懶載入元件支援錯誤備援與佔位符，首屏前 12 張圖片預載入。
Pain Point 04
前端效能瓶頸，大量產品載入卡頓
20,000+ 件產品的列表頁面，若無適當優化會導致頁面卡頓、API 重複請求、首次載入過慢等問題。
Solution 04
多層次效能優化策略
實作智慧快取（5 分鐘 TTL + LRU 淘汰 + Stale-while-revalidate）、批次請求合併 N+1 查詢、虛擬捲動僅渲染可視區域、伺服器端渲染 + 增量靜態再生與 Bundle 優化等多層次效能策略。