사용되지 않는 코드 제거

Oxc minifier는 사용되지 않는 코드를 제거하는 기능을 지원합니다. 예를 들어, if (false) 블록 내부의 문장을 제거하거나, 사용되지 않는 비공개 클래스 필드를 제거합니다.

이 기능은 항상 활성화되어 있지만, 일부 옵션을 활성화하면 더 많은 코드를 제거할 수 있습니다.

변환기에서 유용한 기능

아래의 옵션 외에도, 변환기의 define 기능을 사용하여 전역 식별자를 상수 표현식으로 대체함으로써 더 많은 사용되지 않는 코드를 제거할 수 있습니다.

콘솔 제거

dropConsole 옵션을 활성화하면 모든 console.* 호출을 제거할 수 있습니다. 이 옵션은 Terser의 drop_console 옵션과 esbuild의 drop: ['console'] 옵션과 유사하게 동작합니다.

// 입력
const bar = window.bar();
console.log("foo", bar, baz());

// 출력
const bar = window.bar();

// 예제
import { minify } from "oxc-minify";

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

전체 호출 표현식이 제거됨

이 옵션이 호출 표현식 전체(인수 포함)를 제거한다는 점에 주의하세요. 이는 인수 평가를 제거하는 것이 성능 향상에 도움이 되기 때문에 의도된 행동입니다. 그러나 인수 중 하나라도 부수 효과가 있다면 이 변환이 코드의 동작을 변경할 수 있습니다. 인수를 유지하고 싶다면 compress.treeshake.manualPureFunctions: ['console'] 옵션을 사용할 수 있습니다.

디버거 제거

dropDebugger 옵션을 활성화하면 모든 debugger 문을 제거할 수 있습니다. 이 옵션은 기본적으로 활성화되어 있습니다. 이 옵션은 Terser의 drop_debugger 옵션과 esbuild의 drop: ['debugger'] 옵션과 유사하게 동작합니다.

// 입력
debugger;

// 출력

// 예제
import { minify } from "oxc-minify";

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

레이블 제거

dropLabels 옵션을 활성화하면 지정된 레이블을 가진 모든 레이블된 문을 제거할 수 있습니다. 이 옵션은 esbuild의 dropLabels 옵션과 유사하게 동작합니다.

// 입력
DEV: console.log("foo");
console.log("bar");

// 출력
console.log("bar");

// 예제
import { minify } from "oxc-minify";

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

사용되지 않는 선언

기본적으로 사용되지 않는 함수/클래스/변수 선언은 모두 제거됩니다. unused 옵션을 사용하면 이를 유지할 수 있습니다.

// 입력
{
  function foo() {}
}

// 출력

// 예제
import { minify } from "oxc-minify";

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

name 속성 값 유지

기본적으로 Oxc minifier는 코드가 함수/클래스의 name 속성에 의존하지 않는다고 가정합니다. 이는 name 속성이 함수/클래스 이름이나 변수 이름에서 추론되기 때문이며, 원래 이름을 유지하면 출력 크기를 줄이는 것을 방해할 수 있습니다.

name 속성 값을 유지하려면 keepNames 옵션을 사용할 수 있습니다.

// 입력
var bar = function foo() {};

// 출력
var bar = function foo() {};

// 예제
import { minify } from "oxc-minify";

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

mangle.keepNames 옵션

문자열 매글링 기능을 사용하는 경우, .mangling#keep-name-property-values의 mangle.keepNames 옵션도 함께 활성화하는 것이 좋습니다.

부수 효과 탐지 조절

부수 효과 탐지를 조절하기 위한 여러 옵션이 있습니다.

순수 주석

기본적으로, Oxc minifier는 순수 주석을 존중합니다. 순수 주석은 그 반환값이 사용되지 않을 경우 안전하게 제거할 수 있는 표현식을 표시하는 주석입니다. 자세한 정보는 초안 사양 제안서를 참고하세요.

이를 비활성화하려면 compress.treeshake.annotations 옵션을 false로 설정하면 됩니다.

#__PURE__ / @__PURE__

#__PURE__ 주석은 반환값이 사용되지 않을 경우 안전하게 제거할 수 있는 함수 호출을 표시하는 데 사용됩니다. 이 주석은 함수 호출 자체만을 표시하며, 인수에는 영향을 주지 않습니다.

다른 표현식을 표시하거나 인수까지 커버하고 싶다면 해당 표현식을 IIFE로 감싸고, 그 위에 #__PURE__ 주석을 넣으면 됩니다.

// 입력
/* #__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());

함수가 순수할 필요는 없음

이름에 반해, 함수가 반드시 순수해야 하는 것은 아닙니다 (순수 함수 - 위키백과). 호출을 캐시할 수 있다는 의미는 아닙니다. 다시 말해, 함수가 참조적 불변성(참조적 불변성 - 위키백과)을 가져야 한다는 의미도 아닙니다.

#__NO_SIDE_EFFECTS__ / @__NO_SIDE_EFFECTS__

#__NO_SIDE_EFFECTS__ 주석은 함수 선언을 표시하는 데 사용되며, 그 함수의 모든 호출은 반환값이 사용되지 않을 경우 안전하게 제거될 수 있음을 나타냅니다. 이는 같은 함수 호출이 여러 곳에 있을 때 유용합니다.

// 입력
/* #__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 옵션과 Terser의 pure_funcs 옵션과 유사합니다.

// 입력
foo();
foo.bar();
bar();
bar.baz();
new foo();
foo``;

// 출력
bar();

// 예제
import { minify } from "oxc-minify";

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

속성 읽기 부수 효과 무시

기본적으로, Oxc minifier는 속성 읽기가 부수 효과를 가진다고 가정합니다. 이는 null의 속성에 접근할 때 오류가 발생하기 때문입니다. 또한, 속성이 게터일 경우 게터가 부수 효과를 가질 수 있기 때문입니다. 이러한 가능성을 무시하도록 하려면 compress.treeshake.propertyReadSideEffects 옵션을 false로 설정하면 됩니다. 이 기능은 Rollup의 treeshake.propertyReadSideEffects 옵션과 Terser의 pure_getters 옵션과 유사합니다.

// 입력
const foo = {
  get bar() {
    console.log("효과");
    return "bar";
  },
};
foo.bar;

// 출력 (예: `compress.treeshake.propertyReadSideEffects: false`)

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

기본적으로, Oxc minifier는 전역 변수 접근이 부수 효과를 가진다고 가정합니다. 이는 존재하지 않는 전역 변수에 접근할 때 오류가 발생하기 때문입니다. 또한, 전역 변수가 게터일 경우 게터가 부수 효과를 가질 수 있기 때문입니다. 이러한 가능성을 무시하도록 하려면 compress.treeshake.unknownGlobalSideEffects 옵션을 false로 설정하면 됩니다. 이 기능은 Rollup의 treeshake.unknownGlobalSideEffects 옵션과 유사합니다.

// 입력
const jQuery = $;

// 출력 (예: `compress.treeshake.propertyReadSideEffects: false`)

잘못된 임포트 문 부수 효과 무시

기본적으로, Oxc minifier는 임포트 문이 부수 효과를 가지지 않는다고 가정합니다. 다음의 경우에 임포트 문은 부수 효과를 가집니다:

• 임포트가 해결될 수 없음
• 임포트 이름이 임포트된 모듈에서 내보내지 않음

이러한 부수 효과를 보존해야 한다면, compress.treeshake.invalidImportSideEffects 옵션을 true로 설정하여 보존하도록 할 수 있습니다.

// 입력
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`)