オプティマイザ

オプティマイザプラグインは、トランスフォーマと似ていますが、単一の資産ではなくバンドルを受け取ります。オプティマイザは、縮小、ツリーシェイキング/デッドコード除去、および効果を発揮するために完全なバンドルが必要なその他のサイズ削減技術を実装するために一般的に使用されます。ただし、オプティマイザは、ライセンスヘッダーの追加、インラインバンドルのBase64への変換など、あらゆる種類のバンドル変換にも使用できます。

例

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プラグインは、開発時または--no-optimizeオプションが指定されている場合でも、常にParcelによって実行されます。これは、オプティマイザが圧縮だけでなく、あらゆる種類のバンドル変換に使用できるためです。オプティマイザプラグインが縮小を実行している場合、または一般的にプロダクションビルドでのみ実行する必要がある場合は、バンドルの環境の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>,

|}