Turbopack

Turbopack 是一個針對 JavaScript 和 TypeScript 優化 的 增量打包工具，使用 Rust 編寫，並內建於 Next.js 中。您可以在頁面路由器和應用程式路由器中使用 Turbopack，以獲得 更快速 的本地開發體驗。

為什麼選擇 Turbopack？

我們開發 Turbopack 是為了提升 Next.js 的性能，包括：

• 統一依賴圖： Next.js 支援多種輸出環境（例如客戶端和伺服器端）。管理多個編譯器並拼接打包結果可能很繁瑣。Turbopack 為所有環境使用 單一、統一的依賴圖。
• 打包 vs 原生 ESM： 有些工具在開發時跳過打包，依賴瀏覽器的原生 ESM。這對於小型應用程式可行，但對於大型應用程式可能因過多網路請求而變慢。Turbopack 在開發時進行 打包，但以優化的方式保持大型應用程式的速度。
• 增量計算： Turbopack 將工作平行分配到多個核心，並將結果 快取 到函數級別。一旦某項工作完成，Turbopack 不會重複執行。
• 惰性打包： Turbopack 僅打包開發伺服器實際請求的內容。這種惰性方法可以減少初始編譯時間和記憶體使用量。

開始使用

要在您的 Next.js 專案中啟用 Turbopack，請在 package.json 檔案的 dev 和 build 指令中加入 --turbopack 標記：

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start"
  }
}

目前，Turbopack 的 dev 功能已穩定，而 build 功能處於 alpha 階段。我們正在積極開發生產環境支援，Turbopack 正逐步趨於穩定。

支援的功能

Next.js 中的 Turbopack 對於常見使用情境提供 零配置 支援。以下是開箱即用支援的功能摘要，以及一些關於如何在需要時進一步配置 Turbopack 的參考。

語言功能

框架和 React 功能

CSS 和樣式

資源

模組解析

性能和快速重新整理

不支援和未計劃的功能

某些功能尚未實現或未計劃支援：

• 舊版 CSS 模組功能
  • 獨立的 :local 和 :global 偽類（僅支援函數形式 :global(...)）。
  • @value 規則（由 CSS 變數取代）。
  • :import 和 :export ICSS 規則。
• webpack() 配置 在 next.config.js 中 Turbopack 取代了 webpack，因此不識別 webpack() 配置。請改用 turbopack 配置。
• AMP Next.js 中不計劃支援 Turbopack。
• Yarn PnP Next.js 中不計劃支援 Turbopack。
• experimental.urlImports 不計劃支援。
• experimental.esmExternals 不計劃支援。Turbopack 不支援 Next.js 中的舊版 esmExternals 配置。
• 某些 Next.js 實驗性標記
  • experimental.typedRoutes
  • experimental.nextScriptWorkers
  • experimental.sri.algorithm
  • experimental.fallbackNodePolyfills 我們計劃未來實現這些功能。

有關每個功能標記及其狀態的完整詳細說明，請參閱 Turbopack API 參考。

配置

Turbopack 可以透過 next.config.js（或 next.config.ts）中的 turbopack 鍵進行配置。配置選項包括：

• rules 定義額外的 webpack 載入器 以進行檔案轉換。
• resolveAlias 建立手動別名（類似於 webpack 中的 resolve.alias）。
• resolveExtensions 變更或擴展模組解析的檔案副檔名。
• moduleIds 設定模組 ID 的生成方式（'named' 或 'deterministic'）。
• treeShaking 在開發和未來的生產構建中啟用或停用 Tree Shaking。
• memoryLimit 設定 Turbopack 的記憶體限制（以位元組為單位）。

module.exports = {
  turbopack: {
    // 範例：新增別名和自訂副檔名
    resolveAlias: {
      underscore: 'lodash',
    },
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
  },
}

更多深入的配置範例，請參閱 Turbopack 配置文件。

生成追蹤檔案以進行效能除錯

如果您遇到效能或記憶體問題，並希望協助 Next.js 團隊診斷，可以透過在開發指令後附加 NEXT_TURBOPACK_TRACING=1 來生成追蹤檔案：

NEXT_TURBOPACK_TRACING=1 next dev --turbopack

這將產生一個 .next/trace-turbopack 檔案。在 Next.js 儲存庫 上建立 GitHub 問題時，請包含該檔案以協助我們調查。

總結

Turbopack 是一個基於 Rust 的 增量 打包工具，旨在使本地開發和構建變得快速——尤其是對於大型應用程式。它整合到 Next.js 中，提供零配置的 CSS、React 和 TypeScript 支援。

請持續關注更多更新，我們將繼續改進 Turbopack 並新增生產構建支援。同時，請嘗試使用 next dev --turbopack 並告訴我們您的反饋。

版本變更