ReactJS新一代構建工具：ladle

ladle是React生態系統中Storybook 的替代：是基於 Vite，即時伺服器啟動，生產構建速度提高 4 倍，佔用空間減少 20 倍，程式碼拆分，快速重新整理，單一依賴和命令，無需配置。

現在所有瀏覽器和 Node.js 都原生支援 ES 模組。我們不再需要為這兩者捆綁我們的元件了。

這導致Storybook 和其他基於Webpack環境的需求放緩。

Storybook 在某些領域的表現不如希望的那樣好：

• 生產構建時間——通常是我們 CI 中最慢的部分
• 開發模式啟動時間- 並不總是比相關的產品應用程式快
• 捆綁輸出-託管儲存+緩慢的初始互動時間
• 維護- 我們重新打包了 Storybook、它的依賴項和配置，以便為我們的開發人員提供無縫設定；但是，外掛版本控制和 monorepo 設定使維護變得困難
• testing - 對於我們的自動化視覺測試，我們需要在單獨的過程中抓取和解析故事，因為 Storybook 不匯出故事的靜態列表（和其他後設資料）

ladle是圍繞Vite構建的。它直接為瀏覽器提供模組，並在依賴項需要捆綁時使用快速esbuild。

使用Base Web對 Ladle 和最新的 Storybook v6.4.19 進行基準測試：生產構建速度提高 4 倍。

還有另一個改進 -使用 Ladle 熱過載不到 100 毫秒並保留狀態。Storybook 大約需要2.5 秒，並且不保留狀態。

我們還關心包大小和瀏覽器最初必須下載的資源量：

• ladle構建資料夾為4.6 MB，而 Storybook 為 16.1 MB
• Ladle 下載388 kB資源以開啟預設故事，Storybook 14.3 MB

Ladle 是一個單一的包和命令。它易於安裝和設定 - 無需配置。其他一些功能：

• 支援控制元件、連結、深色主題、RTL 和預覽模式
• 內建外掛始終通過 URL 儲存狀態 - 對測試很有用
• A11y 和鍵盤友好
• 響應式，無 iframe
• 預設啟用程式碼拆分和 React 快速重新整理
• 匯出meta.json包含故事列表和其他後設資料的檔案
• 程式化 API，因此可以輕鬆重新打包

Ladle為開發、共享和測試你的 React 元件提供一個明顯更快的環境。