跳到內容
App RouterAPI 參考Turbopack

Turbopack

Turbopack 是一個針對 JavaScript 和 TypeScript 優化的增量捆綁器，以 Rust 撰寫，並內建於 Next.js 中。Turbopack 可在 Next.js 的 pages 和 app 目錄中使用，以加快本地開發速度。

若要啟用 Turbopack，請在執行 Next.js 開發伺服器時使用 --turbopack 旗標。

package.json
{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

參考

支援的功能

Next.js 中的 Turbopack 對於大多數使用者來說需要零配置，並且可以擴展以用於更進階的使用案例。若要深入瞭解目前 Turbopack 支援的功能，請參閱 API 參考。

不支援的功能

Turbopack 目前僅支援 next dev，不支援 next build。我們目前正努力支援建置，以便更接近穩定版本。

目前不支援這些功能

  • Turbopack 利用 Lightning CSS，後者不支援某些低使用率的 CSS Modules 功能
    • :local 和 :global 作為獨立的偽類別。僅支援函數變體，例如：:global(a)。
    • 已被 CSS 變數取代的 @value 規則。
    • :import 和 :export ICSS 規則。
  • 無效的 CSS 註解語法，例如 //
    • 根據規範，CSS 註解應寫為 /* comment */。
    • 預處理器 (例如 Sass) 確實支援這種替代的註解語法。
  • webpack() 配置在 next.config.js 中
    • Turbopack 取代了 Webpack，這表示不支援 webpack 配置。
    • 若要設定 Turbopack，請參閱文件。
    • Turbopack 支援部分 Webpack 加載器。
  • Babel (.babelrc)
    • Turbopack 利用 SWC 編譯器進行所有轉譯和優化。這表示預設情況下不包含 Babel。
    • 如果您有 .babelrc 檔案，您可能不再需要它，因為 Next.js 包含了常見的 Babel 外掛程式作為可以啟用的 SWC 轉換。您可以在編譯器文件中閱讀更多相關資訊。
    • 如果在確認您的特定使用案例未涵蓋後仍然需要使用 Babel，您可以利用 Turbopack 對自訂 webpack 加載器的支援來包含 babel-loader。
  • 在 App Router 中自動建立根版面配置。
    • 目前不支援此行為，因為它會變更輸入檔案，而是會顯示錯誤，讓您在所需位置手動新增根版面配置。
  • @next/font（舊版字型支援）。
    • @next/font 已被棄用，改用 next/font。Turbopack 完全支援 next/font。
  • Relay 轉換
    • 我們計劃在未來實作此功能。
  • 封鎖在 pages/_document.tsx 中匯入 .css 檔案
    • 目前使用 webpack 時，Next.js 會封鎖在 pages/_document.tsx 中匯入 .css 檔案
    • 我們計劃在未來實作此警告。
  • experimental.typedRoutes
    • 我們計劃在未來實作此功能。
  • experimental.nextScriptWorkers
    • 我們計劃在未來實作此功能。
  • experimental.sri.algorithm
    • 我們計劃在未來實作此功能。
  • experimental.fallbackNodePolyfills
    • 我們計劃在未來實作此功能。
  • experimental.esmExternals
    • 我們目前不計劃在 Next.js 和 Turbopack 中支援舊版的 esmExternals 配置。
  • AMP.
    • 我們目前不計劃在 Next.js 和 Turbopack 中支援 AMP。
  • Yarn PnP
    • 我們目前不計劃在 Next.js 和 Turbopack 中支援 Yarn PnP。
  • experimental.urlImports
    • 我們目前不計劃在 Next.js 和 Turbopack 中支援 experimental.urlImports。
  • :import 和 :export ICSS 規則
    • 我們目前不計劃在 Next.js 和 Turbopack 中支援 :import 和 :export ICSS 規則，因為 Turbopack 使用的 CSS 解析器 Lightning CSS 不支援這些規則。
  • edge runtime 中的 unstable_allowDynamic 配置

範例

產生追蹤檔案

追蹤檔案可讓 Next.js 團隊調查和改善效能指標和記憶體用量。若要產生追蹤檔案，請將 NEXT_TURBOPACK_TRACING=1 附加到 next dev --turbopack 命令，這將產生一個 .next/trace-turbopack 檔案。

在回報與 Turbopack 效能和記憶體用量相關的問題時，請在您的 GitHub 問題中包含追蹤檔案。