最佳化#

Rspack 將根據 mode 選擇適當的最佳化設定。您也可以透過 optimization 自訂設定。

optimization.moduleIds#

• 類型： 'natural' | 'named' | 'deterministic'

optimization.chunkIds#

• 類型： 'named' | 'deterministic'

optimization.minimize#

• 類型： boolean
• 預設值：生產模式 為true，開發模式 為false

是否最小化套件。

optimization.mergeDuplicateChunks#

• 類型： boolean
• 預設值：true

是否合併包含相同模組的區塊。將 optimization.mergeDuplicateChunks 設定為 false 將停用此最佳化。

optimization.minimizer#

• 類型： Array<Plugin>
• 預設值：[new SwcJsMinimizerRspackPlugin(), new LightningCssMinimizerRspackPlugin()]

自訂最小化器。預設情況下，會使用 rspack.SwcJsMinimizerRspackPlugin 和 rspack.LightningCssMinimizerRspackPlugin。當指定 optimization.minimizer 時，將停用預設最小化器。

const terserPlugin = require('terser-webpack-plugin');
module.exports = {
  context: __dirname,
  target: 'node',
  entry: {
    main: './index.js',
  },
  optimization: {
    minimize: true,
    minimizer: [new terserPlugin()],
  },
};

使用具有自訂選項的內建最小化器

const rspack = require('@rspack/core');
module.exports = {
  // ...
  optimization: {
    minimize: process.env.NODE_ENV === 'production',
    // when `optimization.minimizer` is specified, the default minimizers are disabled by default
    // but you can use '...', it represents the default minimizers
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin({
        minimizerOptions: {
          format: {
            comments: false,
          },
        },
      }),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: {
          errorRecovery: false,
        },
      }),
    ],
  },
};

optimization.removeEmptyChunks#

• 類型： boolean
• 預設值：true

移除編譯中產生的空區塊。

optimization.runtimeChunk#

• 類型： boolean | string | ((entrypoint: { name: string }) => string)
• 預設值：false

用於控制如何產生運行時程式碼塊。

設定為 true 或 'multiple' 將為每個入口點新增一個僅包含運行時的額外程式碼塊。

設定為 'single' 將把所有入口點的運行時程式碼提取到一個單獨的程式碼塊中。

optimization.realContentHash#

• 類型： boolean | 'flag'
• 預設值：生產模式 為true，開發模式 為false

在資源處理完成後，新增額外的雜湊編譯步驟，以取得正確的資源內容雜湊值。此功能在生產模式下預設啟用。

如果 realContentHash 設定為 false，將使用內部數據計算雜湊值，在某些情況下，即使資源相同，雜湊值也可能會改變。

module.exports = {
  //...
  optimization: {
    realContentHash: true,
  },
};

optimization.splitChunks#

• 類型： false | object

Rspack 支援使用 optimization.splitChunks 配置項來分割程式碼塊。

動態導入的模組預設會啟用此功能。

若要關閉此功能，請將其設定為 false。

請參閱 SplitChunksPlugin 頁面，了解設定此行為的可用選項。

optimization.sideEffects#

• 類型： boolean | 'flag'
• 預設值：生產模式 為true，開發模式 為'flag'

{
  "name": "npm module",
  "version": "1.0.0",
  "sideEffects": ["**/src/*.js"]
}

告知 Rspack 辨識 package.json 或規則中的 sideEffects 標誌，以便在未使用的匯出時跳過標記為不包含副作用的模組。

optimization.sideEffects 依賴於 optimization.providedExports 啟用。此依賴關係會增加建置時間，但由於程式碼生成減少，移除模組對效能有正面的影響。此優化的效果取決於您的程式碼庫，您可以嘗試看看是否能提升效能。

module.exports = {
  //...
  optimization: {
    sideEffects: true,
  },
};

如果您只想讓 Rspack 使用手動的 sideEffects 標誌（透過 package.json 和 module.rule.sideEffects），而不分析原始碼

module.exports = {
  //...
  optimization: {
    sideEffects: 'flag',
  },
};

預設情況下，在非生產建置中使用 'flag' 值。

optimization.providedExports#

• 類型： boolean
• 預設值：true

啟用後，Rspack 將分析模組提供的匯出，包括重新匯出的模組。當匯入引用不存在匯出的成員時，將會發出警告或錯誤。預設情況下，optimization.providedExports 是啟用的。此分析將增加建置時間。您可以考慮在開發模式下停用此設定。停用此設定可能會導致與執行時循環依賴相關的錯誤，如 SideEffects 章節所述。

module.exports = {
  //...
  optimization: {
    providedExports: false,
  },
};

optimization.usedExports#

• 類型： boolean | 'global'
• 預設值：生產模式 為true，開發模式 為false

告知 Rspack 決定每個模組的已使用匯出。這取決於 optimization.providedExports。optimization.usedExports 收集的資訊將用於其他最佳化或程式碼生成，例如，不會為未使用的匯出生成匯出，當所有用法都相容時，匯出名稱會被縮減為單一字元識別符號。縮減器的無效程式碼消除功能將會受益於此，並可移除未使用的匯出。

module.exports = {
  //...
  optimization: {
    usedExports: false,
  },
};

若要選擇退出每個執行時的已使用匯出分析

module.exports = {
  //...
  optimization: {
    usedExports: 'global',
  },
};

optimization.mangleExports#

• 類型： boolean | 'deterministic' | 'size'
• 預設值：生產模式 為deterministic，開發模式 為false

optimization.mangleExports 允許控制匯出名稱的縮減。

支援下列值

optimization.innerGraph#

• 類型： boolean
• 預設值：生產模式 為true，開發模式 為false

optimization.innerGraph 告知 Rspack 是否執行更詳細的變數賦值分析。這有助於 Rspack 識別未使用的模組匯出，從而減少綑綁輸出的檔案大小。

例如

import { value } from 'lib';

const value2 = value;

function f1() {
  console.log(value);
}

function f2() {
  console.log(value2);
}

在這裡，我們將 value 賦值給 value2。value2 和 value 都分別在函式 f2 和 f1 中存取，但是這些函式沒有被呼叫，因此實際上未使用 value2 和 value，因此可以移除 value 的匯入。

optimization.concatenateModules#

• 類型： boolean
• 預設值：生產模式 為true，開發模式 為false

告知 Rspack 尋找可以安全地串連到單一模組中的模組圖片段。取決於 optimization.providedExports 和 optimization.usedExports。預設情況下，optimization.concatenateModules 在 production 模式下啟用，否則停用。

optimization.nodeEnv#

• 類型： boolean | string
• 預設值：false

告知 Rspack 將 process.env.NODE_ENV 設定為給定的字串值。除非設定為 false，否則 optimization.nodeEnv 會使用 DefinePlugin。如果已設定，optimization.nodeEnv 預設 為 mode，否則會回退到 'production'。

可能的值

• 任何字串：要將 process.env.NODE_ENV 設定為的值。
• false：不修改/設定 process.env.NODE_ENV 的值。

module.exports = {
  //...
  optimization: {
    nodeEnv: 'production',
  },
};

optimization.emitOnErrors#

• 類型： boolean
• 預設值：生產模式 為false，開發模式 為true

當編譯時發生錯誤時，使用 optimization.emitOnErrors 發出資源。這確保了會發出錯誤資源。嚴重錯誤會被發出到生成的程式碼中，並會在執行時導致錯誤。