Skip to content

不要コード削除

Oxc ミニファイアは不要コードの削除をサポートしています。たとえば、if (false) ブロック内の文や使用されていないプライベートクラスフィールドを削除します。

この機能は常に有効になっていますが、一部のオプションを有効にすることで、さらに多くのコードを削除できます。

変換器での有用な機能

以下のオプション以外にも、変換器における define 機能 を使用して、グローバル識別子を定数式に置き換えることで、より多くの不要コードを削除できます。

コンソールの削除

dropConsole オプションを有効にすることで、すべての console.* 呼び出しを削除できます。このオプションは Terserdrop_console オプションや esbuild の drop: ['console'] オプション と同様の動作をします。

js
// 入力
const bar = window.bar();
console.log("foo", bar, baz());

// 出力
const bar = window.bar();
js
// 例
import { minify } from "oxc-minify";

const result = await minify("lib.js", code, {
  compress: {
    dropConsole: true,
  },
});

呼び出し式全体が削除される

このオプションは引数を含む呼び出し式全体を削除することに注意してください。これは、コストのかかる引数の評価を削除することで実行時パフォーマンスの向上に役立つため意図的です。ただし、引数のいずれかに副作用がある場合、この変換によりコードの振る舞いが変更されます。引数を保持したい場合は、compress.treeshake.manualPureFunctions: ['console'] オプションを使用できます。

デバッガーの削除

dropDebugger オプションを有効にすることで、すべての debugger 記述を削除できます。このオプションはデフォルトで有効です。このオプションは Terserdrop_debugger オプションや esbuild の drop: ['debugger'] オプション と同様の動作をします。

js
// 入力
debugger;

// 出力
js
// 例
import { minify } from "oxc-minify";

const result = await minify("lib.js", code, {
  compress: {
    dropDebugger: true,
  },
});

ラベルの削除

dropLabels オプションを有効にすることで、指定されたラベルを持つすべてのラベル付き記述を削除できます。このオプションは esbuild の dropLabels オプション と同様の動作をします。

js
// 入力
DEV: console.log("foo");
console.log("bar");

// 出力
console.log("bar");
js
// 例
import { minify } from "oxc-minify";

const result = await minify("lib.js", code, {
  compress: {
    dropLabels: ["DEV"],
  },
});

使用されていない宣言の削除

すべての使用されていない関数 / クラス / 変数の宣言はデフォルトで削除されます。unused オプションを使用することで、それらを保持できます。

js
// 入力
{
  function foo() {}
}

// 出力
js
// 例
import { minify } from "oxc-minify";

const result = await minify("lib.js", code, {
  compress: {
    unused: true, // または "keep_assign"
  },
});

name プロパティ値の保持

デフォルトでは、Oxc ミニファイアはコードが関数 / クラスの name プロパティに依存していないと仮定します。これは name プロパティが関数 / クラス名または変数名から推論され、元の名前を保持すると出力サイズの削減が妨げられるためです。

name プロパティ値を保持するには、keepNames オプションを使用できます。

js
// 入力
var bar = function foo() {};

// 出力
var bar = function foo() {};
js
// 例
import { minify } from "oxc-minify";

const result = await minify("lib.js", code, {
  compress: {
    keepNames: true, // { function: true, class: true } の省略形
  },
});

mangle.keepNames オプション

マングリング機能を使用している場合、mangle.keepNames オプション を有効にするのもおすすめです。

側面効果検出の制御

側面効果検出を制御する複数のオプションがあります。

純粋な注釈

デフォルトでは、Oxc ミニファイアは純粋な注釈を尊重します。純粋な注釈は、その戻り値が使われない場合に安全に削除できる式を示すコメントです。詳細については ドラフト仕様提案 を参照してください。

この動作は compress.treeshake.annotations オプションを false に設定することで無効化できます。

#__PURE__ / @__PURE__

#__PURE__ 注釈は、その戻り値が使われない場合に安全に削除できる関数呼び出しをマークするために使用します。ただし、これは関数呼び出し自体のみをマークし、その引数をカバーするものではありません。

他の式や引数をマークしたい場合、それらを IIFE で囲み、その上に #__PURE__ 注釈を置くことができます。

js
// 入力
/* #__PURE__ */ foo();
/* #__PURE__ */ new Foo();
/* #__PURE__ */ foo(bar());
/* #__PURE__ */ (() => {
  foo(bar());
})();
console.log(/* #__PURE__ */ foo());
console.log(/* #__PURE__ */ new Foo());

// 出力
bar();
console.log(foo());
console.log(new Foo());

関数は純粋である必要はない

名前とは裏腹に、関数が純粋である(純関数 - Wikipedia)必要はありません。呼び出しをキャッシュできるという意味ではありません。言い換えれば、関数が参照透明である(参照透明性 - Wikipedia)必要もありません。

#__NO_SIDE_EFFECTS__ / @__NO_SIDE_EFFECTS__

#__NO_SIDE_EFFECTS__ 注釈は、関数宣言に対して、そのすべての呼び出しが戻り値が使われない場合に安全に削除できることをマークするために使用します。これにより、同じ関数が複数箇所で呼び出されている場合に便利です。

js
// 入力
/* #__NO_SIDE_EFFECTS__ */
export function foo() {}
/* #__NO_SIDE_EFFECTS__ */
export const bar = () => {};
foo();
bar();

// 出力
export function foo() {}
export const bar = () => {};

純粋関数の定義

純粋な注釈で関数をマークする代わりに、compress.treeshake.manualPureFunctions オプションで関数をマークすることもできます。このオプションは関数名の配列です。この機能は Rollup の treeshake.manualPureFunctions オプション および Terserpure_funcs オプションと似ています。

js
// 入力
foo();
foo.bar();
bar();
bar.baz();
new foo();
foo``;

// 出力
bar();
js
// 例
import { minify } from "oxc-minify";

const result = await minify("lib.js", code, {
  compress: {
    treeshake: {
      manualPureFunctions: ["foo", "bar.baz"],
    },
  },
});

プロパティ読み取りの側面効果を無視

デフォルトでは、Oxc ミニファイアはプロパティの読み取りに側面効果があると仮定します。これは、null のプロパティにアクセスするとエラーが発生するためです。また、プロパティがゲッターであり、そのゲッターに側面効果があるケースもあります。これらの可能性を無視するように Oxc ミニファイアに指示するには、compress.treeshake.propertyReadSideEffects オプションを false に設定します。この機能は Rollup の treeshake.propertyReadSideEffects オプション および Terserpure_getters オプションと似ています。

js
// 入力
const foo = {
  get bar() {
    console.log("効果");
    return "bar";
  },
};
foo.bar;

// 出力(`compress.treeshake.propertyReadSideEffects: false` で)

グローバル変数アクセスの側面効果を無視

デフォルトでは、Oxc ミニファイアはグローバル変数へのアクセスに側面効果があると仮定します。これは、存在しないグローバル変数にアクセスするとエラーが発生するためです。また、グローバル変数がゲッターであり、そのゲッターに側面効果があるケースもあります。これらの可能性を無視するように Oxc ミニファイアに指示するには、compress.treeshake.unknownGlobalSideEffects オプションを false に設定します。この機能は Rollup の treeshake.unknownGlobalSideEffects オプション と似ています。

js
// 入力
const jQuery = $;

// 出力(`compress.treeshake.propertyReadSideEffects: false` で)

無効なインポート記述の側面効果を無視

デフォルトでは、Oxc ミニファイアはインポート記述に側面効果がないと仮定します。以下の場合にインポート記述には側面効果があります:

  • インポートが解決できない
  • インポート名がインポートされたモジュールからエクスポートされていない

これらの側面効果を保持する必要がある場合、compress.treeshake.invalidImportSideEffects オプションを true に設定することで、Oxc ミニファイアに保持させるように指示できます。

js
// 入力
import { existing } from "cannot-be-resolved";
import { missing } from "somewhere";

// 出力(`compress.treeshake.invalidImportSideEffects: true` で)
import { existing } from "cannot-be-resolved";
import { missing } from "somewhere";

// 出力(`compress.treeshake.invalidImportSideEffects: false` で)