Skip to content

Minifier

JavaScript minification은 웹사이트 성능을 최적화하는 데 중요한 역할을 하며, 사용자에게 전송되는 데이터량을 줄여 페이지 로딩 속도를 빠르게 만듭니다.
이는 특히 각 초가 수백만 달러에 해당할 수 있는 전자상거래 웹사이트에서 막대한 경제적 가치를 지닙니다.

그러나 기존의 미니파이어는 보통 압축 품질과 속도 사이에서 균형을 맞춰야 하는 문제가 있습니다.
최고의 압축률을 위해 가장 느린 선택을 해야 할지, 혹은 덜 압축된 상태지만 가장 빠른 속도를 원한다면 그 반대 선택을 해야 합니다.
하지만 압축률을 희생하지 않고 더 빠른 미니파이어를 개발할 수 있다면 어떨까요?

프로젝트 목표

우리는 google-closure-compiler, terser, esbuild, tdewolff-minify와 같은 유명한 미니파이어들로부터 모든 테스트 케이스를 이식하여, 이러한 목표를 달성하려는 프로토타입을 활발히 개발하고 있습니다.

초기 결과에 따르면, 우리의 목표를 달성할 수 있을 것으로 보입니다.
Oxc 미니파이어를 사용하면 압축 품질을 희생하지 않고도 더 빠른 미니파이어 시간을 경험할 수 있습니다.

대상 성능

  • 속도: Terser보다 빠르며, esbuild와 경쟁 가능
  • 압축률: Terser의 압축 비율과 동등하거나 이를 초과
  • 정확성: 주요 미니파이어 테스트 세트를 모두 통과

아키텍처 개요

설계 원칙

Oxc 미니파이어는 몇 가지 핵심 원칙을 중심으로 설계되었습니다:

  1. 의미 인식형: 의미 분석을 사용해 안전한 최적화를 가능하게 함
  2. 증분형: 증분 컴파일 워크플로우에 적합하도록 설계됨
  3. 구성 가능: 다양한 최적화 수준과 타깃을 지원함
  4. 정확성 우선: 공격적인 최적화보다 정확성을 우선시함

현재 상태

구현된 기능

  • 사용되지 않는 코드 제거: 도달 불가능한 코드 제거
  • 상수 폴딩: 상수 표현식 평가
  • 트리 쉐이킹: 사용되지 않는 내보내기 제거 (기본 수준)
  • 변수 병합: 변수 선언 병합
  • 문장 병합: 호환 가능한 문장 결합
  • 이름 변경: 변수 및 함수 이름을 짧게 수정
  • 제어 흐름 최적화: 제어 구조 단순화
  • 함수 인라인: 작은 함수 인라인 처리
  • 고급 트리 쉐이킹: 모듈 간 최적화

성능 최적화

성능 유지를 위한 주요 전략:

  1. 최소한의 AST 탐색: 여러 최적화를 단일 패스에서 통합
  2. 효율적인 데이터 구조: 어레인 할당과 컴팩트한 표현 방식 사용
  3. 조기 종료: 이익이 없는 경우 최적화 생략

리소스

문서

외부 참조

플레이그라운드