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 規則。
  • 在 .module.css 中使用 composes 組合 .css 文件。在 webpack 中，這會將 .css 文件視為 CSS 模組，而在 Turbopack 中，.css 文件始終是全域的。這意味著如果您想在 CSS 模組中使用 composes，需要將 .css 文件更改為 .module.css 文件。
  • 在 CSS 模組中使用 @import 導入 .css 作為 CSS 模組。在 webpack 中，這會將 .css 文件視為 CSS 模組，而在 Turbopack 中，.css 文件始終是全域的。這意味著如果您想在 CSS 模組中使用 @import，需要將 .css 文件更改為 .module.css 文件。
• 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 並告訴我們您的反饋。

版本變更