最佳化器

最佳化外掛程式類似於轉換器，但它們接受的是一個套件，而不是單一資產。最佳化器通常用於實作縮小化、樹狀搖晃/移除無用程式碼，以及其他需要完整套件才能發揮作用的縮小技術。然而，最佳化器也可以用於任何類型的套件轉換，例如在前面加上授權標頭、將內嵌套件轉換為 base 64 等。

範例

optimize 方法接收套件的內容及其原始碼對應，並應傳回這些內容的轉換版本。多個最佳化器外掛程式可能會依序執行，每個最佳化器的結果會傳遞給下一個最佳化器。請參閱下方以取得有關原始碼對應的更多資訊。

import {Optimizer} from '@parcel/plugin';

export default new Optimizer({
  async optimize({contents, map}) {
    let {code, sourceMap} = optimize(contents, map);
    return {
      contents: code,
      map: sourceMap
    };
  }
});

載入設定

應在最佳化器外掛程式的 loadConfig 方法中載入使用者的專案設定。請參閱載入設定以取得如何執行此項操作的詳細資訊。

條件最佳化

Optimizer 外掛程式會一直由 Parcel 執行，即使在開發中或指定 --no-optimize 選項時也是如此。這是因為最佳化程式可用於任何類型的套件轉換，而不仅仅是壓縮。如果你的最佳化程式外掛程式正在執行縮小或通常只應在生產建置中執行，你應檢查套件環境的 shouldOptimize 屬性，如果為 false，則傳回原始內容。

import {Optimizer} from '@parcel/plugin';

export default new Optimizer({
  async optimize({contents, map, bundle}) {
    // Don't minify if shouldOptimize is false.
    if (!bundle.env.shouldOptimize) {
      return {contents, map};
    }

    let {code, sourceMap} = minify(contents, map);
    return {
      contents: code,
      map: sourceMap
    };
  }
});

二進制內容

傳遞至最佳化程式的輸入內容可能是字串、Buffer 或 ReadableStream。通常，原始碼會是字串，而二進制內容會是 Buffer 或串流，但你不應假設如此。@parcel/utils 套件包含一些函式，可協助在它們之間進行轉換：blobToString 和 blobToBuffer。最佳化程式可能會傳回這些表示形式中的任何一個。

import {Optimizer} from '@parcel/plugin';
import {blobToBuffer} from '@parcel/utils';

export default new Optimizer({
  async optimize({contents}) {
    let buffer = await blobToBuffer(contents);
    let optimized = optimize(buffer);
    return {contents: optimized};
  }
});

原始碼對應表

原始碼對應表可協助開發人員在瀏覽器中偵錯已編譯和已套件化的程式碼，方法是將已編譯程式碼中的位置對應回原始碼。最佳化程式外掛程式應轉換提供的原始碼對應表，以及套件的內容。

Parcel 使用 @parcel/source-map 函式庫進行原始碼對應表操作。請參閱 原始碼對應表，以取得如何使用它的更多詳細資訊。你可能需要將傳遞給其他工具的原始碼對應表進行轉換。

傳遞至最佳化程式外掛程式的 getSourceMapReference 函式可用於在套件內容中插入原始碼對應表的 URL。Parcel 會在適當時機負責產生內嵌原始碼對應表（例如遵循目標設定中的 sourceMap 選項）。

import {Optimizer} from '@parcel/plugin';
import SourceMap from '@parcel/source-map';

export default new Optimizer({
  async optimize({contents, map, getSourceMapReference}) {
    // Convert the input source map to JSON.
    let result = optimize(contents, map.toVLQ());

    // Convert returned JSON source map to a Parcel SourceMap.
    let sourceMap = new SourceMap(options.projectRoot);
    sourceMap.addVLQMap(result.map);

    // Add source map reference to compiled code
    let url = await getSourceMapReference(sourceMap);
    result.code += `\n//# sourceMappingURL=${url}\n`

    return {
      contents: result.code,
      sourceMap
    };
  }
});

相關 API

type Optimizer<ConfigType, BundleConfigType> = {|

  loadConfig?: ({|
    config: Config,
    options: PluginOptions,
    logger: PluginLogger,
  |}) => Async<ConfigType>,

  loadBundleConfig?: ({|
    bundle: NamedBundle,
    bundleGraph: BundleGraph<NamedBundle>,
    config: Config,
    options: PluginOptions,
    logger: PluginLogger,
  |}) => Async<BundleConfigType>,

  optimize({|
    bundle: NamedBundle,
    bundleGraph: BundleGraph<NamedBundle>,
    contents: Blob,
    map: ?SourceMap,
    options: PluginOptions,
    logger: PluginLogger,
    config: ConfigType,
    bundleConfig: BundleConfigType,
    getSourceMapReference: (map: ?SourceMap) => Async<?string>,
  |}): Async<BundleResult>,

|}