LiteSheet:用 TypeScript 與 Canvas 重構的極輕量化瀏覽器試算表

github.com
LiteSheet:用 TypeScript 與 Canvas 重構的極輕量化瀏覽器試算表

LiteSheet 是一個旨在取代重量級試算表庫(如 Luckysheet)的輕量化替代方案。它使用 TypeScript 重新編寫,核心渲染引擎完全基於 HTML5 Canvas,目標是在保留 Excel 核心操作體驗的同時,極大化地減少前端載入體積與依賴項。

這個專案解決的核心問題是瀏覽器試算表元件過於臃腫。傳統的試算表庫往往依賴大量第三方套件(如 jQuery、Lodash)且 bundle 大小高達數 MB,導致網頁載入緩慢。LiteSheet 將執行時依賴降低至零(不含匯出用的 SheetJS),將核心 bundle 大小壓縮至約 92KB,使其非常適合需要嵌入簡單試算功能、但對效能與載入速度有要求的網頁應用。

核心運作機制

LiteSheet 採取了典型的狀態驅動架構,將資料與顯示完全解耦。

首先是 Store 單一資料源。所有儲存格的數值、格式、合併狀態以及目前的選取範圍都儲存在 Store 中。它實作了簡單的快照機制,讓 undo 和 redo 功能能夠透過歷史紀錄棧輕鬆實現。

其次是無狀態渲染。CanvasRenderer 不儲存任何業務邏輯,它只負責在收到 Store 的更新通知後,根據目前的快照將所有儲存格、表頭、選取框以及浮動圖片一次性繪製在 Canvas 上。這種做法避免了 DOM 元素過多導致的效能崩潰。

最後是公式引擎。LiteSheet 提供了一套 JS 實作的公式引擎,支援 SUM、AVERAGE、IF 等常用函數。值得注意的是,它預留了 WASM 擴充接口(由 Rust 實作),允許在處理海量數據計算時切換到更高效率的編譯語言執行環境。

技術亮點

全 Canvas 渲染:擺脫了 DOM 混合渲染的效能瓶頸,縮放(Zoom)與滾動更加流暢。

零執行依賴:不依賴 jQuery 等老舊庫,完全使用現代 TypeScript 編寫,對現代前端框架(React/Vue)更友善。

混合公式引擎:提供 JS 快速啟動與 WASM 高效計算兩種選擇,兼顧開發便利性與執行效能。

PWA 支援:內建 Service Worker 與 Manifest,讓試算表可以像原生 App 一樣離線使用。

適合誰使用

適合需要快速在網頁中整合試算表 UI 的開發者,例如內部管理後台的數據編輯器、輕量級的在線報表工具,或是希望在低延遲環境下提供表格編輯功能的應用。

導入成本與風險

導入成本極低。由於它提供 IIFE 格式的打包檔,開發者可以直接透過 script 標籤引入,無需複雜的建置流程即可運行。

風險方面,由於它是從 Luckysheet 精簡而來,雖然涵蓋了大部分核心功能,但在處理極端複雜的 Excel 格式或極大規模的數據集(數十萬列)時,其穩定性與記憶體管理可能不如商業級產品。此外,公式引擎目前僅支援常用函數,若業務需要複雜的財務或統計公式,需要自行擴展 JS 或 Rust 端的實作。

成熟度判斷

LiteSheet 目前處於功能完備的開發版本。它擁有完整的單元測試(Vitest)以及自動化稽核腳本(audit.cjs)來確保功能對齊,這在開源輕量庫中較為罕見,顯示其對品質有一定要求。然而,它更像是一個高品質的基礎框架或核心元件,而非一個開箱即用的完整產品。對於大多數輕量化場景,它已經足夠成熟;但若要替代專業的 Excel 在線版,仍有較大差距。