Oxc Transformer Alpha

• 

  BoshenProject Lead

• 

  DunqingCore

• 

  overlookmotelCore

Oxc 변환기(일명 트랜스파일)의 알파 릴리스를 발표하게 되어 매우 기쁩니다.

이 릴리스에는 세 가지 주요 기능이 포함되어 있습니다:

1. 타입스크립트를 ESNext로 변환합니다.
2. 내장된 React Refresh와 함께 리액트 JSX를 ESNext로 변환합니다.
3. 타입스크립트 컴파일러를 사용하지 않고 타입스크립트 고립 선언 DTS 출력을 지원합니다.

이 알파 단계에서는 이러한 기능을 실험하여 빌드 시간을 가속화하는 것을 권장합니다.

우리의 벤치마킹 결과에 따르면:

• 변환: Oxc는 SWC보다 3배~5배 빠르며, 메모리 사용량은 20% 감소하고 패키지 크기는 더 작습니다 (2 MB 대비 SWC의 37 MB).
• 변환: Oxc는 Babel보다 20배~50배 빠르며, 메모리 사용량은 70% 감소하고, 설치할 npm 패키지 수가 2개뿐이며, Babel의 170개 대비 19MB 작습니다.
• 리액트 개발 + 리액트 리프레시: Oxc는 SWC보다 5배 빠르고, Babel보다 50배 빠릅니다.
• 타입스크립트 고립 선언 .d.ts 출력: 일반 파일에서 TSC보다 40배 빠르고, 큰 파일에서는 20배 빠릅니다.

사용 예제

oxc-transform npm 패키지

현재 뷰.js는 빌드 파이프라인에서 고립 선언을 위해 oxc-transform npm 패키지를 실험 중하고 있습니다:

import { isolatedDeclaration } from "oxc-transform";
const dts = isolatedDeclaration(filename, ts);

@lukeed 및 @maraisr는 oxc-transform를 사용하여 자신의 패키지 empathic 및 dldr에서 .d.ts를 한 번의 단계로 변환하고 생성하고 있습니다.

다음 예제는 한 번의 변환 단계에서 .js와 .d.ts를 모두 생성하는 방법을 보여줍니다:

import { transform } from "oxc-transform";
const transformed = transform(filePath, sourceCode, {
  typescript: {
    onlyRemoveTypeImports: true,
    declaration: { stripInternal: true },
  },
});
await fs.writeFile("out.js", transformed.code);
await fs.writeFile("out.d.ts", transformed.declaration);

unplugin-isolated-decl

vue-macros는 esbuild 플러그인과의 통합 도구로 unplugin-isolated-decl을 사용하고 있습니다.

@sxzz는 보고하여 .d.ts 생성 시간이 76초에서 16초로 줄어들었다고 밝혔습니다.

Airtable에서의 바젤 빌드

에어테이블의 @michaelm은 바젤 빌드 내에서 자신의 CI 파이프라인에 Oxc의 고립 선언 .d.ts 출력을 통합하고 있습니다.

루스트 oxc_transformer 크레이트

롤돈 번들러는 oxc_transformer 루스트 크레이트를 직접 사용하고 있습니다.

벤치마킹 결과

벤치마킹 설정은 oxc-project/bench-transformer에 있으며, 벤치마크 결과는 그 깃허브 액션에서 확인할 수 있습니다.

(오류 또는 잘못된 구성이 있다면 수정 제안을 환영합니다.)

ubuntu-latest에서 코드 줄 수에 따라 측정된 예시입니다:

변환

줄 수	oxc	swc	babel
~100	0.14 ms	0.7 ms (5x)	11.5 ms (82x)
~1000	0.9 ms	5.7 ms (6.3x)	38.7 ms (43x)
~10000	14.9 ms	35.9 ms(2.4x)	492 ms (33x)

고립 선언

줄 수	oxc	tsc
~100	0.1 ms	23.1 ms (231x)
~1000	3.1 ms	26.8 ms (8.6x)
~10000	3.5 ms	115.2 ms (33x)

패키지 크기

Oxc는 총 2개의 npm 패키지만 다운로드하면 되며, 전체 크기는 2MB입니다.

패키지	크기
@oxc-transform/binding-darwin-arm64	2.0 MB
@swc/core-darwin-arm64	37.5 MB
@babel/core + @babel/preset-env + @babel/preset-react + @babel/preset-typescript	21 MB 및 170개 패키지

메모리 사용량

Oxc는 더 적은 메모리를 사용합니다.

parser.ts 변환 시 메모리 사용량 측정 (10777줄) – /usr/bin/time -alh node 사용:

	최대 RSS
oxc	51 MB
swc	67 MB
babel	172 MB

다음 릴리스

다음 릴리스에는 ES6 대상 낮추기 및 @babel/plugin-transform-modules-commonjs가 포함될 예정입니다.

감사 인사

이 릴리스에 기여한 모든 노고에 대해 @Dunqing 및 @overlookmotel에게 진심으로 감사드립니다.

감사합니다 snyder.tech, schoolhouse.world, @lukeed 및 @maraisr님께서 제공해주신 정성 어린 후원.