Skip to content

데드 코드 제거

Oxc 미니파이어는 데드 코드 제거를 지원합니다. 예를 들어 if (false) 블록 안의 문과 사용되지 않는 비공개 클래스 필드를 제거합니다.

이 기능은 항상 켜져 있으며, 옵션을 켜면 더 많은 코드를 줄일 수 있습니다.

트랜스포머의 유용한 기능

아래 옵션 외에도 트랜스포머의 define 기능으로 전역 식별자를 상수 표현식으로 바꿔 데드를 더 줄일 수 있습니다.

Drop Console

dropConsole 옵션을 켜면 모든 console.* 호출을 제거합니다. 동작은 Terserdrop_consoleesbuild의 drop: ['console']과 비슷합니다.

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

// output
const bar = window.bar();
js
// Example
import { minify } from "oxc-minify";

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

호출 표현식 전체가 제거됨

이 옵션은 인자까지 포함한 호출 표현식 전체를 제거합니다. 의도적인 동작으로, 인자 평가가 비싼 경우 런타임 성능에 도움이 됩니다. 다만 인자에 부수 효과가 있으면 프로그램 동작이 바뀝니다. 인자는 유지하고 싶다면 compress.treeshake.manualPureFunctions: ['console'] 옵션을 사용할 수 있습니다.

Drop Debugger

dropDebugger 옵션을 켜면 모든 debugger 문을 제거합니다. 기본적으로 켜져 있습니다. 동작은 Terserdrop_debuggeresbuild의 drop: ['debugger']과 비슷합니다.

js
// input
debugger;

// output
js
// Example
import { minify } from "oxc-minify";

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

Drop Labels

dropLabels 옵션으로 지정한 레이블이 붙은 문을 모두 제거할 수 있습니다. 동작은 esbuild의 dropLabels와 비슷합니다.

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

// output
console.log("bar");
js
// Example
import { minify } from "oxc-minify";

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

사용하지 않는 선언

사용되지 않는 함수·클래스·변수 선언은 기본적으로 제거됩니다. unused 옵션으로 유지할 수 있습니다.

js
// input
{
  function foo() {}
}

// output
js
// Example
import { minify } from "oxc-minify";

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

name 속성 값 유지

기본적으로 Oxc 미니파이어는 함수·클래스의 name 속성에 의존하지 않는 코드라고 가정합니다. name은 함수·클래스 이름이나 변수 이름에서 추론되며, 원래 이름을 유지하면 출력 크기를 줄이기 어렵기 때문입니다.

name 값을 유지하려면 keepNames 옵션을 사용합니다.

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

// output
var bar = function foo() {};
js
// Example
import { minify } from "oxc-minify";

const result = await minify("lib.js", code, {
  compress: {
    keepNames: true, // shorthand of { function: true, class: true }
  },
});

mangle.keepNames 옵션

맹글링을 사용한다면 mangle.keepNames 옵션도 함께 켜는 것이 좋습니다.

부수 효과 탐지 제어

부수 효과 탐지를 조정하는 옵션이 여러 가지 있습니다.

순수 주석

기본적으로 Oxc 미니파이어는 순수 주석을 존중합니다. 순수 주석은 반환 값이 쓰이지 않으면 안전하게 제거할 수 있는 표현식을 표시하는 주석입니다. 자세한 내용은 초안 스펙 제안을 참고하세요.

compress.treeshake.annotationsfalse로 두면 끌 수 있습니다.

#__PURE__ / @__PURE__

#__PURE__ 주석은 반환 값이 쓰이지 않으면 안전하게 제거할 수 있는 함수 호출을 표시합니다. 호출 자체만 표시하며 인자까지 포함하지는 않습니다.

다른 표현식이나 인자까지 표시하려면 IIFE로 감싸 그 위에 #__PURE__를 둡니다.

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

// output
bar();
console.log(foo());
console.log(new Foo());

함수가 꼭 순수할 필요는 없음

이름과 달리 함수가 수학적 의미의 순수 함수일 필요는 없습니다(순수 함수 - 위키백과). 호출을 캐시해도 된다는 뜻도 아닙니다. 즉 참조 투명할 필요는 없습니다(참조 투명성 - 위키백과).

#__NO_SIDE_EFFECTS__ / @__NO_SIDE_EFFECTS__

#__NO_SIDE_EFFECTS__ 주석은 함수 선언에 붙여, 그 함수의 모든 호출이 반환 값이 쓰이지 않으면 안전하게 제거될 수 있음을 표시합니다. 같은 함수 호출이 여러 곳에 있을 때 유용합니다.

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

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

순수 함수 지정

순수 주석 대신 compress.treeshake.manualPureFunctions 옵션으로 함수 이름 배열을 지정할 수 있습니다. Rollup의 treeshake.manualPureFunctionsTerserpure_funcs와 비슷합니다.

js
// input
foo();
foo.bar();
bar();
bar.baz();
new foo();
foo``;

// output
bar();
js
// Example
import { minify } from "oxc-minify";

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

프로퍼티 읽기 부수 효과 무시

기본적으로 Oxc 미니파이어는 프로퍼티 읽기에 부수 효과가 있다고 가정합니다. null의 프로퍼티에 접근하면 오류가 나고, getter가 부수 효과를 가질 수 있기 때문입니다. compress.treeshake.propertyReadSideEffectsfalse로 두면 이런 가능성을 무시한다고 알려줄 수 있습니다. Rollup의 treeshake.propertyReadSideEffectsTerserpure_getters와 비슷합니다.

js
// input
const foo = {
  get bar() {
    console.log("effect");
    return "bar";
  },
};
foo.bar;

// output (with `compress.treeshake.propertyReadSideEffects: false`)

전역 변수 접근 부수 효과 무시

기본적으로 Oxc 미니파이어는 전역 변수 접근에 부수 효과가 있다고 가정합니다. 없는 전역에 접근하면 오류가 나고, 전역이 getter일 때 부수 효과가 있을 수 있기 때문입니다. compress.treeshake.unknownGlobalSideEffectsfalse로 두면 이런 가능성을 무시합니다. Rollup의 treeshake.unknownGlobalSideEffects와 비슷합니다.

js
// input
const jQuery = $;

// output (with `compress.treeshake.propertyReadSideEffects: false`)

잘못된 import 문 부수 효과 유지

기본적으로 Oxc 미니파이어는 import 문에 부수 효과가 없다고 가정합니다. 다음 경우에는 부수 효과가 있습니다:

  • import를 해석할 수 없을 때
  • import 이름이 해당 모듈에서 export되지 않을 때

이런 부수 효과를 유지하려면 compress.treeshake.invalidImportSideEffectstrue로 설정합니다.

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

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

// output (with `compress.treeshake.invalidImportSideEffects: false`)