如何優化本地開發環境

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。參閱我們的升級指南和 codemods 以獲取更多資訊。

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 呼叫的成本。

了解更多關於此實驗性選項。

8. 考慮本地開發而非 Docker

如果您在 Mac 或 Windows 上使用 Docker 進行開發，可能會體驗到比本地運行 Next.js 顯著更慢的效能。

在 Mac 和 Windows 上，Docker 的檔案系統存取可能導致熱模組替換 (HMR) 需要數秒甚至數分鐘，而相同應用程式在本地開發時 HMR 速度很快。

這種效能差異源於 Docker 在非 Linux 環境中處理檔案系統操作的方式。為獲得最佳開發體驗：

開發時使用本地開發 (npm run dev 或 pnpm dev) 而非 Docker
保留 Docker 用於生產部署和測試生產建構
如果必須使用 Docker 開發，考慮在 Linux 機器或虛擬機上使用 Docker

了解更多關於 Docker 部署的生產用途。

問題診斷工具

詳細獲取記錄

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

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

了解更多關於獲取記錄。

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