Echarts 官宣更新：體積減少98%，UI特效更加好看

2024-03-11碼農

模擬面試、簡歷指導、入職指導、計畫指導、答疑解惑 可私信找我~已幫助100+名同學完成改造！

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

增強的 ESM 支持

為了增強開發者在 Node.js 環境和測試場景中使用 ECharts 的便利性，我們對 ESM（ECMAScript 模組）的支持做了重要最佳化。

在舊版本中，ECharts 僅透過 npm 的 lib 目錄提供了 *.esm 檔格式，這雖然在打包工具（如 webpack）中執行良好，但在純 Node.js 環境或某些基於 Node.js 的測試框架（比如 vitest 和 jest）中卻不盡人意。

為此，我們引入了以下幾項改進：

在 package.json 檔中，我們新增了 "type": "module" ，標識模組型別為 ESM。

我們還在 package.json 中定義了 "exports" 欄位，以精確指定模組匯出路徑。

在部份子目錄下，我們添加了僅含 "type": "commonjs" 的 package.json 檔，以支持 CommonJS 模組型別。

這些調整使得像 echarts/core.js 這類檔能夠在各種環境下（包括純 Node.js、vitest、jest、create-react-app 等）以 ESM 的形式被正確解析。

我們還確保了這項新功能的相容性，無論是在不同的執行時環境（Node.js、vitest、jest、create-react-app、伺服器端渲染等）還是不同的打包工具（webpack、rollup、vite、esbuild 等）中都能順暢工。

我們對這項新功能寄予厚望，並相信它將大大提升開發者在使用過程中的體驗。

伺服端渲染＋客戶端輕量執行時

Apache ECharts 是一個功能豐富的圖表庫，但這也導致了較大的包體積。為了應對這一問題，開發者之前已經可以透過 TreeShaking 來按需載入程式碼，有效減少了不必要的程式碼量。從 5.3 版本開始，Apache ECharts 進一步支持了無需外部依賴的伺服端 SVG 字串渲染功能，允許圖表在伺服器端渲染並支持初始動畫。這樣，透過伺服端渲染的圖表可以用作頁面的首屏顯示，顯著降低首屏載入時間。

盡管伺服端渲染是減輕包體積負擔的有效手段，但在需要客戶端互動時，還是必須載入 echarts.js 檔，這會增加額外的載入時間。對於對頁面載入速度有嚴格要求的套用場景，這可能不是最佳選擇。

在 5.5.0 版本中，ECharts 引入了一個新的客戶端輕量執行時，使得在不載入完整 ECharts 的情況下，也能支持基本的圖表互動。透過這種方式，我們可以先在伺服器端渲染圖表，然後在客戶端僅透過載入不到 4KB 的輕量執行時（gzip 壓縮後約為 1KB）來實作圖表的初始動畫和一些常用的互動功能。這種改進極大地加快了頁面的載入速度，尤其改善了移動端的使用者體驗。

例如，一個包含標題的餅圖，如果在客戶端只打包餅圖和標題元件，gzip 壓縮後的體積為 135KB；而采用伺服端渲染加客戶端輕量執行時的方案，SVG 渲染結果和客戶端執行時的總體積 gzip 後僅為約 2KB，僅占前者體積的 1.5%。此外，這種方案還支持初始動畫、滑鼠懸浮高亮和點選事件等常見互動，滿足大多數互動需求。

要采用這種方案，伺服器端的程式碼保持不變，只需確保 ECharts 的版本號為 5.5.0 或更高。