核心概念整理與翻譯

Turbo 引擎

Turbopack 的高效能來自其基於 Rust 實現的 Turbo 引擎，該引擎支援 遞增式計算，從而大幅提升建構速度。

• 函數級快取
  Turbo 引擎支援特定函數的記憶快取。當這些函數被呼叫時，其輸出會被快取，供後續使用。範例：

  const fullBundle = concat(readFile("api.ts"), readFile("sdk.ts"));
  

  若檔案 sdk.ts 更新，Turbopack 會重新讀取該檔案並合併結果，但 api.ts 可以直接從快取中讀取，避免重複讀取。

快取

目前，Turbo 引擎將快取存放在記憶體中，適合開發伺服器環境。未來計劃支援將快取持久化到檔案系統或遠端伺服器。

根據請求編譯

Turbopack 只會編譯實際被請求的程式碼，以提升啟動速度。例如，只有在用戶請求頁面時，才會編譯該頁面的資源。

ECMAScript 支援

Turbopack 使用 SWC 來建構 JavaScript 和 TypeScript，因此預設支援所有的 ESNext 語法。

• Browserslist
  透過 package.json 中的 browserslist 欄位來設定目標瀏覽器：

  {
    "browserslist": [
      "last 1 version",
      "> 1%",
      "not dead"
    ]
  }
  

TypeScript 支援

Turbopack 支援 TypeScript 和 JSX/TSX 文件的直接導入，並可解析 tsconfig.json 中的 paths 和 baseUrl 設定：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "app/*": ["app/*"]
    }
  }
}

框架支援

Turbopack 計劃支援多種框架，目前 Alpha 版本主要針對 Next.js 進行優化。

• React 服務端元件
  Turbopack 支援 React 服務端元件，並確保服務端與客戶端程式碼不會混合編譯。

CSS 支援

Turbopack 支援全域 CSS 及 CSS 模組，也內建支援 postcss-nested 語法：

.phone {
    &_title {
        width: 500px;
        @media (max-width: 500px) {
            width: auto;
        }
    }
}

環境變數

Turbopack 會從 .env 檔案中自動注入環境變數，並支援即時重載：

NEXT_PUBLIC_DEPLOYMENT_NAME="my-site"
DATABASE_URL="postgres://"

靜態資源導入

Turbopack 支援靜態資源導入，例如圖片、影片、音頻檔案等：

import img from './img.png';

核心概念繼續撰寫與翻譯

Babel 支援

目前，Turbopack 還不支援 Babel 插件。預設情況下，它不使用 Babel 來編譯 JavaScript 或 TypeScript 程式碼。未來，Turbopack 會通過插件的形式來支援 Babel。

SCSS 和 LESS 支援

目前 Turbopack 尚未原生支援 SCSS 和 LESS，但未來版本可能會透過插件來提供支援。

Tailwind CSS

Turbopack 暫未開箱支援 Tailwind CSS，但因其可作為 PostCSS 插件使用，未來可能會透過插件系統來支援。當前可以通過 CLI 工具進行導入，範例如下：

npm install --save-dev tailwindcss autoprefixer concurrently

{
  "scripts": {
    "dev": "concurrently \"next dev --turbo\" \"tailwindcss --input input.css --output output.css --watch\"",
    "build": "tailwindcss input.css --output output.css && next build"
  }
}

開發伺服器的最佳化

Turbopack 對開發伺服器進行了深入的最佳化，確保提供快速、流暢的開發體驗。包括：

• HMR (熱模組替換)
  當檔案更新時，透過熱模組替換 (HMR)，Turbopack 可以推送更新到瀏覽器，而無需刷新整個頁面，極大提升了開發效率。

• 熱更新 (Hot Update)
  基於 HMR 的熱更新技術，Turbopack 支援在更新過程中保留應用狀態。例如，當修改 <Count /> 元件時，裡面的 count 狀態將不會被重置。

靜態資源支援

Turbopack 支援靜態資源的導入，包括圖片、影片、音頻等。

• 導入靜態資源範例：

import img from './img.png';
import video from './video.mp4';
import audio from './audio.wav';

公共目錄 (Public Directory)

Turbopack 原生支援在 public 目錄中放置靜態資源，這樣它們可以通過網站的根 URL 訪問，例如：

public/favicon.png 可透過 https://example.com/favicon.png 訪問

JSON 支援

Turbopack 原生支援 JSON 檔案的導入，並支援命名導入：

import { users, posts } from './fixtures.json';

模組導入支援

Turbopack 支援 CommonJS (CJS)、ECMAScript 模組 (ESM) 以及部分 AMD 模組導入。

• CommonJS 支援範例：

const { add } = require('./math');
add(1, 2);

• 動態導入支援：

const img = require(`./images/${imgName}.png`);

• ESM 支援範例：

import img from './img.png';
import { z } from 'zod';

• 動態導入 (import()) 範例：

const getFeatureFlags = () => {
  return import('/featureFlags').then(mod => {
    return mod.featureFlags;
  });
};

環境變數支援

Turbopack 原生支援從 .env 文件中讀取環境變數，並注入到 process.env：

NEXT_PUBLIC_DEPLOYMENT_NAME="my-site"
DATABASE_URL="postgres://"

這些變數將自動從 .env 文件中讀取，例如 .env.local、.env.development 等。

• 範例：

console.log(process.env.NEXT_PUBLIC_DEPLOYMENT_NAME);

此外，Turbopack 還支援環境變數的 即時重載，當變數更新時，無需重啟伺服器即可更新變數值。

結論

Turbopack 的核心功能基於 Turbo 引擎，透過高效的快取和遞增式編譯機制來加速開發流程。其針對請求級編譯、靜態資源支援、環境變數即時重載、和開發伺服器的優化，確保了高效且快速的開發體驗。未來，隨著更多插件的支援與功能的增強，Turbopack 將進一步提升在不同框架和開發環境中的應用價值。