如何優化本地開發環境

Next.js 旨在提供卓越的開發者體驗。隨著應用程式規模增長，您可能會注意到本地開發時的編譯時間變慢。本指南將協助您識別並解決常見的編譯效能問題。

本地開發與生產環境差異

使用 next dev 的開發過程與 next build 和 next start 有所不同。

next dev 會在您開啟或導航至應用程式中的路由時進行編譯。這讓您能啟動開發伺服器，無需等待應用程式中所有路由完成編譯，不僅速度更快且記憶體使用更少。執行生產環境建置時會套用其他優化，例如檔案最小化和建立內容雜湊，這些在本地開發中並非必要。

提升本地開發效能

1. 檢查電腦的防毒軟體

防毒軟體可能減慢檔案存取速度。

嘗試將專案資料夾加入防毒軟體排除清單。雖然這在 Windows 電腦上較為常見，但建議所有安裝防毒工具的系統都進行此設定。

2. 更新 Next.js 並啟用 Turbopack

確保您使用最新版本的 Next.js。每個新版本通常都包含效能改進。

Turbopack 是整合至 Next.js 的新一代打包工具，可提升本地開發效能。

npm install next@latest
npm run dev --turbopack

深入了解 Turbopack。參閱我們的升級指南和程式碼轉換工具以獲取更多資訊。

3. 檢查您的引入方式

程式碼的引入方式會顯著影響編譯和打包時間。了解更多關於優化套件打包的資訊，並探索如 Dependency Cruiser 或 Madge 等工具。

圖示庫

像 @material-ui/icons 或 react-icons 這樣的庫可能引入數千個圖示，即使您只使用其中幾個。嘗試僅引入您需要的圖示：

// 不要這樣做：
import { Icon1, Icon2 } from 'react-icons/md'

// 應該這樣做：
import Icon1 from 'react-icons/md/Icon1'
import Icon2 from 'react-icons/md/Icon2'

像 react-icons 這樣的庫包含許多不同的圖示集。選擇一個圖示集並堅持使用該集合。

例如，如果您的應用程式使用 react-icons 並引入以下所有圖示集：

pi (Phosphor Icons)
md (Material Design Icons)
tb (tabler-icons)
cg (cssgg)

即使您只從每個集合引入一個圖示，組合起來編譯器仍需處理數萬個模組。

桶式檔案 (Barrel files)

「桶式檔案」是指從其他檔案匯出多個項目的檔案。它們會減慢建置速度，因為編譯器必須解析它們以確認模組範圍內是否存在副作用。

盡可能直接從特定檔案引入。深入了解桶式檔案以及 Next.js 的內建優化。

優化套件引入

Next.js 可自動優化特定套件的引入方式。如果您使用的套件採用桶式檔案，請將它們加入 next.config.js：

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
}

Turbopack 會自動分析並優化引入方式，無需此配置。

4. 檢查 Tailwind CSS 設定

如果您使用 Tailwind CSS，請確保設定正確。

常見錯誤是在 content 陣列中包含 node_modules 或其他不應掃描的大型目錄檔案。

Tailwind CSS 3.4.8 或更新版本會針對可能減慢建置的設定發出警告。

在 tailwind.config.js 中明確指定要掃描的檔案：

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}', // 正確做法
    // 以下範圍可能過大
    // 會匹配到 `packages/**/node_modules`
    // '../../packages/**/*.{js,ts,jsx,tsx}',
  ],
}

避免掃描不必要的檔案：
module.exports = { content: [ // 更好做法 - 僅掃描 'src' 資料夾 '../../packages/ui/src/**/*.{js,ts,jsx,tsx}', ], }

5. 檢查自訂 webpack 設定

如果您添加了自訂 webpack 設定，它們可能減慢編譯速度。

考慮是否真的需要在本地開發中使用這些設定。您可以選擇僅在生產建置中包含特定工具，或考慮遷移至 Turbopack 並使用載入器。

6. 優化記憶體使用

如果應用程式非常龐大，可能需要更多記憶體。

深入了解如何優化記憶體使用。

7. 伺服器元件與資料獲取

伺服器元件的變更會導致本地開發時整個頁面重新渲染以顯示新變更，這包括為元件獲取新資料。

實驗性選項 serverComponentsHmrCache 允許您在本地開發的熱模組替換 (HMR) 刷新期間快取伺服器元件中的 fetch 回應。這會帶來更快的回應速度並降低計費 API 呼叫的成本。

深入了解此實驗性選項。

問題排查工具

詳細的 fetch 日誌記錄

在 next.config.js 中使用 logging.fetches 選項，查看開發期間更詳細的執行資訊：

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

深入了解 fetch 日誌記錄。

Turbopack 追蹤功能

Turbopack 追蹤是幫助您理解本地開發期間應用程式效能的工具。它提供關於每個模組編譯時間及其相互關係的詳細資訊。

確保已安裝最新版 Next.js。
產生 Turbopack 追蹤檔案：
NEXT_TURBOPACK_TRACING=1 npm run dev
在應用程式中導航或編輯檔案以重現問題。
停止 Next.js 開發伺服器。
.next 資料夾中會產生名為 trace-turbopack 的檔案。
可使用 next internal trace [檔案路徑] 解讀該檔案：
next internal trace .next/trace-turbopack
在尚未提供 trace 指令的版本中，指令名稱為 turbo-trace-server：
next internal turbo-trace-server .next/trace-turbopack
追蹤伺服器啟動後，可透過 https://trace.nextjs.org/ 查看追蹤結果。
預設情況下追蹤檢視器會聚合時間數據，若要查看每個獨立時間，可將右上角的「Aggregated in order」切換為「Spans in order」。

仍有問題？

將 Turbopack 追蹤章節產生的追蹤檔案分享至 GitHub Discussions 或 Discord。

On this page