Binaryen은 C++로 작성된 WebAssembly용 컴파일러 및 도구 모음 인프라 라이브러리입니다. WebAssembly로의 컴파일을 직관적이고 빠르고 효과적으로 만드는 것을 목표로 합니다. 이 게시물에서는 ExampleScript라는 합성 장난감 언어의 예를 사용하여 Binaryen.js API를 사용하여 JavaScript로 WebAssembly 모듈을 작성하는 방법을 알아봅니다. 모듈 만들기, 모듈에 함수 추가, 모듈에서 함수 내보내기의 기본사항을 다룹니다. 이를 통해 실제 프로그래밍 언어를 WebAssembly로 컴파일하는 전반적인 메커니즘에 관해 알아볼 수 있습니다. 또한 Binaryen.js와 명령줄에서 wasm-opt를 사용하여 Wasm 모듈을 최적화하는 방법을 알아봅니다.
Binaryen에 관한 배경 정보
Binaryen은 단일 헤더에 직관적인 C API가 있으며 JavaScript에서 사용할 수도 있습니다. WebAssembly 형식의 입력을 허용하지만 이를 선호하는 컴파일러의 경우 일반적인 제어 흐름 그래프도 허용합니다.
중간 표현식(IR)은 컴파일러 또는 가상 머신이 소스 코드를 나타내기 위해 내부적으로 사용하는 데이터 구조 또는 코드입니다. Binaryen의 내부 IR은 컴팩트한 데이터 구조를 사용하며 사용 가능한 모든 CPU 코어를 사용하여 완전히 병렬화된 코드 생성 및 최적화를 위해 설계되었습니다. Binaryen의 IR은 WebAssembly의 하위 집합이므로 WebAssembly로 컴파일됩니다.
Binaryen의 최적화 도구에는 코드 크기와 속도를 개선할 수 있는 여러 패스가 있습니다. 이러한 최적화의 목표는 Binaryen을 자체적으로 컴파일러 백엔드로 사용할 만큼 강력하게 만드는 것입니다. 여기에는 Wasm 축소라고 생각할 수 있는 WebAssembly별 최적화 (범용 컴파일러에서 실행하지 않을 수 있음)가 포함됩니다.
Binaryen의 예시 사용자로서 AssemblyScript
Binaryen은 여러 프로젝트에서 사용됩니다. 예를 들어 AssemblyScript는 Binaryen을 사용하여 TypeScript와 유사한 언어에서 WebAssembly로 직접 컴파일합니다. AssemblyScript 플레이그라운드에서 예시를 사용해 보세요.
AssemblyScript 입력:
export function add(a: i32, b: i32): i32 {
return a + b;
}
Binaryen에서 생성한 텍스트 형식의 해당 WebAssembly 코드:
(module
(type $0 (func (param i32 i32) (result i32)))
(memory $0 0)
(export "add" (func $module/add))
(export "memory" (memory $0))
(func $module/add (param $0 i32) (param $1 i32) (result i32)
local.get $0
local.get $1
i32.add
)
)
Binaryen 도구 모음
Binaryen 도구 모음은 JavaScript 개발자와 명령줄 사용자 모두에게 유용한 도구를 제공합니다. 이러한 도구의 하위 집합은 다음에 나와 있습니다. 포함된 도구의 전체 목록은 프로젝트의 README 파일에서 확인할 수 있습니다.
binaryen.js: Wasm 모듈을 만들고 최적화하기 위한 Binaryen 메서드를 노출하는 독립형 JavaScript 라이브러리입니다. 빌드의 경우 npm의 binaryen.js를 참고하거나 GitHub 또는 unpkg에서 직접 다운로드하세요.wasm-opt: WebAssembly를 로드하고 Binaryen IR 패스를 실행하는 명령줄 도구입니다.wasm-as및wasm-dis: WebAssembly를 조합하고 분해하는 명령줄 도구입니다.wasm-ctor-eval: 컴파일 시간에 함수 (또는 함수의 일부)를 실행할 수 있는 명령줄 도구입니다.wasm-metadce: 모듈 사용 방식에 따라 유연한 방식으로 Wasm 파일의 일부를 삭제하는 명령줄 도구입니다.wasm-merge: 여러 Wasm 파일을 단일 파일로 병합하는 명령줄 도구로 상응하는 가져오기를 내보내기에 연결합니다. JavaScript용 번들러와 같지만 Wasm용입니다.
WebAssembly로 컴파일
한 언어를 다른 언어로 컴파일하는 데는 일반적으로 여러 단계가 포함되며, 가장 중요한 단계는 다음 목록에 나와 있습니다.
- 문법 분석: 소스 코드를 토큰으로 분할합니다.
- 구문 분석: 추상 구문 트리를 만듭니다.
- 의미 분석: 오류를 확인하고 언어 규칙을 시행합니다.
- 중간 코드 생성: 더 추상적인 표현을 만듭니다.
- 코드 생성: 대상 언어로 번역합니다.
- 타겟별 코드 최적화: 타겟에 맞춰 최적화합니다.
Unix 환경에서 컴파일에 자주 사용되는 도구는 lex 및 yacc입니다.
lex(어휘 분석 생성기):lex는 어휘 분석기(렉서 또는 스캐너라고도 함)를 생성하는 도구입니다. 정규 표현식과 해당 작업의 집합을 입력으로 받아 입력 소스 코드에서 패턴을 인식하는 리터럴 분석기의 코드를 생성합니다.yacc(Yet Another Compiler Compiler):yacc는 문법 분석을 위한 파서를 생성하는 도구입니다. 프로그래밍 언어의 공식 문법 설명을 입력으로 받아 파서의 코드를 생성합니다. 파서는 일반적으로 소스 코드의 계층 구조를 나타내는 추상 구문 트리(AST)를 생성합니다.
실행 예시
이 게시물의 범위를 고려할 때 전체 프로그래밍 언어를 다루는 것은 불가능하므로 편의상 매우 제한적이고 쓸모없는 합성 프로그래밍 언어 ExampleScript를 사용해보세요. 이 프로그래밍 언어는 구체적인 예를 통해 일반적인 연산을 표현합니다.
add()함수를 작성하려면 모든 추가의 예(예:2 + 3)를 코딩합니다.multiply()함수를 작성하려면 예를 들어6 * 12를 작성합니다.
사전 경고에 따라 완전히 쓸모 없지만 형태 분석기가 단일 정규 표현식 /\d+\s*[\+\-\*\/]\s*\d+\s*/이 될 만큼 간단합니다.
다음으로 파서가 필요합니다. 실제로 이름이 지정된 캡처 그룹 /(?<first_operand>\d+)\s*(?<operator>[\+\-\*\/])\s*(?<second_operand>\d+)/이 있는 정규 표현식을 사용하여 추상 문법 트리의 매우 단순화된 버전을 만들 수 있습니다.
ExampleScript 명령어는 한 줄에 하나씩 있으므로 파서는 줄바꿈 문자를 기준으로 코드를 줄 단위로 처리할 수 있습니다. 이렇게 하면 이전의 글머리기호 목록에서 형태 분석, 구문 분석, 의미 분석이라는 첫 번째 세 단계를 확인하기에 충분합니다. 이 단계의 코드는 다음 목록에 있습니다.
export default class Parser {
parse(input) {
input = input.split(/\n/);
if (!input.every((line) => /\d+\s*[\+\-\*\/]\s*\d+\s*/gm.test(line))) {
throw new Error('Parse error');
}
return input.map((line) => {
const { groups } =
/(?<first_operand>\d+)\s*(?<operator>[\+\-\*\/])\s*(?<second_operand>\d+)/gm.exec(
line,
);
return {
firstOperand: Number(groups.first_operand),
operator: groups.operator,
secondOperand: Number(groups.second_operand),
};
});
}
}
중간 코드 생성
이제 ExampleScript 프로그램을 매우 단순화된 추상 문법 트리로 표현할 수 있으므로 다음 단계는 추상 중간 표현을 만드는 것입니다. 첫 번째 단계는 Binaryen에서 새 모듈을 만드는 것입니다.
const module = new binaryen.Module();
추상 문법 트리의 각 줄에는 firstOperand, operator, secondOperand로 구성된 삼중항이 포함됩니다. ExampleScript에서 가능한 4개의 연산자(+, -, *, /) 각각에 대해 Binaryen의 Module#addFunction() 메서드를 사용하여 새 함수를 모듈에 추가해야 합니다. Module#addFunction() 메서드의 매개변수는 다음과 같습니다.
name:string: 함수 이름을 나타냅니다.functionType:Signature, 함수의 서명을 나타냅니다.varTypes:Type[]: 지정된 순서대로 추가 로컬을 나타냅니다.body: 함수의 콘텐츠인Expression입니다.
자세히 살펴볼 몇 가지 세부정보가 있으며 Binaryen 문서를 통해 이 공간을 탐색할 수 있습니다. 하지만 결국 ExampleScript의 + 연산자의 경우 사용 가능한 여러 정수 연산 중 하나인 Module#i32.add() 메서드로 이동하게 됩니다.
덧셈에는 첫 번째 항과 두 번째 항이라는 두 개의 피연산자가 필요합니다. 함수를 실제로 호출하려면 Module#addFunctionExport()를 사용하여 내보내야 합니다.
module.addFunction(
'add', // name: string
binaryen.createType([binaryen.i32, binaryen.i32]), // params: Type
binaryen.i32, // results: Type
[binaryen.i32], // vars: Type[]
// body: ExpressionRef
module.block(null, [
module.local.set(
2,
module.i32.add(
module.local.get(0, binaryen.i32),
module.local.get(1, binaryen.i32),
),
),
module.return(module.local.get(2, binaryen.i32)),
]),
);
module.addFunctionExport('add', 'add');
추상 문법 트리를 처리한 후 모듈에는 네 가지 메서드가 포함됩니다. 세 가지는 정수 숫자를 사용하는 메서드(Module#i32.add()를 기반으로 하는 add(), Module#i32.sub()를 기반으로 하는 subtract(), Module#i32.mul()를 기반으로 하는 multiply())이고 하나는 예외 값 divide()(Module#f64.div()를 기반으로 함)입니다. ExampleScript는 부동 소수점 결과도 처리하기 때문입니다.
for (const line of parsed) {
const { firstOperand, operator, secondOperand } = line;
if (operator === '+') {
module.addFunction(
'add', // name: string
binaryen.createType([binaryen.i32, binaryen.i32]), // params: Type
binaryen.i32, // results: Type
[binaryen.i32], // vars: Type[]
// body: ExpressionRef
module.block(null, [
module.local.set(
2,
module.i32.add(
module.local.get(0, binaryen.i32),
module.local.get(1, binaryen.i32)
)
),
module.return(module.local.get(2, binaryen.i32)),
])
);
module.addFunctionExport('add', 'add');
} else if (operator === '-') {
module.subtractFunction(
// Skipped for brevity.
)
} else if (operator === '*') {
// Skipped for brevity.
}
// And so on for all other operators, namely `-`, `*`, and `/`.
실제 코드베이스를 다루는 경우 호출되지 않는 비활성 코드가 있을 수 있습니다. ExampleScript의 Wasm 컴파일 실행 예시에서 나중에 최적화되고 삭제될 비활성 코드를 인위적으로 도입하려면 내보내지 않은 함수를 추가하면 됩니다.
// This function is added, but not exported,
// so it's effectively dead code.
module.addFunction(
'deadcode', // name: string
binaryen.createType([binaryen.i32, binaryen.i32]), // params: Type
binaryen.i32, // results: Type
[binaryen.i32], // vars: Type[]
// body: ExpressionRef
module.block(null, [
module.local.set(
2,
module.i32.div_u(
module.local.get(0, binaryen.i32),
module.local.get(1, binaryen.i32),
),
),
module.return(module.local.get(2, binaryen.i32)),
]),
);
이제 컴파일러가 거의 준비되었습니다. 반드시 필요한 것은 아니지만 Module#validate() 메서드로 모듈을 유효성 검사하는 것이 좋습니다.
if (!module.validate()) {
throw new Error('Validation error');
}
결과 Wasm 코드 가져오기
결과물인 Wasm 코드를 가져오기 위해 Binaryen에는 S-표현식의 .wat 파일로 텍스트 표현을 인간이 읽을 수 있는 형식으로 가져오는 메서드와 브라우저에서 직접 실행할 수 있는 .wasm 파일로 바이너리 표현을 가져오는 메서드가 두 가지 있습니다. 바이너리 코드는 브라우저에서 직접 실행할 수 있습니다. 내보내기가 작동하는지 확인하려면 내보내기를 로깅하는 것이 좋습니다.
const textData = module.emitText();
console.log(textData);
const wasmData = module.emitBinary();
const compiled = new WebAssembly.Module(wasmData);
const instance = new WebAssembly.Instance(compiled, {});
console.log('Wasm exports:\n', instance.exports);
네 가지 연산이 모두 포함된 ExampleScript 프로그램의 전체 텍스트 표현은 다음과 같습니다. 데드 코드가 여전히 존재하지만 WebAssembly.Module.exports()의 스크린샷에 따라 노출되지 않는 이유를 확인합니다.
(module
(type $0 (func (param i32 i32) (result i32)))
(type $1 (func (param f64 f64) (result f64)))
(export "add" (func $add))
(export "subtract" (func $subtract))
(export "multiply" (func $multiply))
(export "divide" (func $divide))
(func $add (param $0 i32) (param $1 i32) (result i32)
(local $2 i32)
(local.set $2
(i32.add
(local.get $0)
(local.get $1)
)
)
(return
(local.get $2)
)
)
(func $subtract (param $0 i32) (param $1 i32) (result i32)
(local $2 i32)
(local.set $2
(i32.sub
(local.get $0)
(local.get $1)
)
)
(return
(local.get $2)
)
)
(func $multiply (param $0 i32) (param $1 i32) (result i32)
(local $2 i32)
(local.set $2
(i32.mul
(local.get $0)
(local.get $1)
)
)
(return
(local.get $2)
)
)
(func $divide (param $0 f64) (param $1 f64) (result f64)
(local $2 f64)
(local.set $2
(f64.div
(local.get $0)
(local.get $1)
)
)
(return
(local.get $2)
)
)
(func $deadcode (param $0 i32) (param $1 i32) (result i32)
(local $2 i32)
(local.set $2
(i32.div_u
(local.get $0)
(local.get $1)
)
)
(return
(local.get $2)
)
)
)
WebAssembly 최적화
Binaryen에서는 Wasm 코드를 최적화하는 두 가지 방법을 제공합니다. Binaryen.js 자체에 하나, 명령줄에 하나가 있습니다. 전자는 기본적으로 표준 최적화 규칙 세트를 적용하고 최적화 및 축소 수준을 설정할 수 있도록 허용하며, 후자는 기본적으로 규칙을 사용하지 않지만 대신 전체 맞춤설정을 허용합니다. 즉, 충분한 실험을 통해 코드에 따라 최적의 결과를 얻기 위한 설정을 조정할 수 있습니다.
Binaryen.js를 사용한 최적화
Binaryen으로 Wasm 모듈을 최적화하는 가장 간단한 방법은 Binaryen.js의 Module#optimize() 메서드를 직접 호출하고 선택적으로 최적화 및 축소 수준을 설정하는 것입니다.
// Assume the `wast` variable contains a Wasm program.
const module = binaryen.parseText(wast);
binaryen.setOptimizeLevel(2);
binaryen.setShrinkLevel(1);
// This corresponds to the `-Os` setting.
module.optimize();
이렇게 하면 이전에 인위적으로 도입된 비활성 코드가 삭제되므로 ExampleScript 장난감 예시의 Wasm 버전 텍스트 표현에는 더 이상 비활성 코드가 포함되지 않습니다. 또한 최적화 단계인 SimplifyLocals(기타 로컬 관련 최적화) 및 Vacuum(명백히 불필요한 코드 삭제)에 의해 local.set/get 쌍이 삭제되고 RemoveUnusedBrs(필요하지 않은 위치에서 중단 삭제)에 의해 return가 삭제되는 방식도 참고하세요.
(module
(type $0 (func (param i32 i32) (result i32)))
(type $1 (func (param f64 f64) (result f64)))
(export "add" (func $add))
(export "subtract" (func $subtract))
(export "multiply" (func $multiply))
(export "divide" (func $divide))
(func $add (; has Stack IR ;) (param $0 i32) (param $1 i32) (result i32)
(i32.add
(local.get $0)
(local.get $1)
)
)
(func $subtract (; has Stack IR ;) (param $0 i32) (param $1 i32) (result i32)
(i32.sub
(local.get $0)
(local.get $1)
)
)
(func $multiply (; has Stack IR ;) (param $0 i32) (param $1 i32) (result i32)
(i32.mul
(local.get $0)
(local.get $1)
)
)
(func $divide (; has Stack IR ;) (param $0 f64) (param $1 f64) (result f64)
(f64.div
(local.get $0)
(local.get $1)
)
)
)
최적화 패스는 여러 개 있으며 Module#optimize()는 특정 최적화 및 축소 수준의 기본 세트를 사용합니다. 완전히 맞춤설정하려면 명령줄 도구 wasm-opt를 사용해야 합니다.
wasm-opt 명령줄 도구로 최적화
사용할 패스를 완전히 맞춤설정하기 위해 Binaryen에는 wasm-opt 명령줄 도구가 포함되어 있습니다. 가능한 최적화 옵션의 전체 목록을 확인하려면 도구의 도움말 메시지를 확인하세요. wasm-opt 도구는 가장 널리 사용되는 도구이며 Emscripten, J2CL, Kotlin/Wasm, dart2wasm, wasm-pack 등의 Wasm 코드를 최적화하기 위해 여러 컴파일러 도구 모음에서 사용됩니다.
wasm-opt --help
패스를 이해하는 데 도움이 되도록 전문가 지식 없이도 이해할 수 있는 패스의 일부를 발췌하여 다음과 같이 소개합니다.
- CodeFolding: 코드를 병합하여 중복 코드를 방지합니다(예: 두 개의
if조건문의 끝에 공유된 안내가 있는 경우). - DeadArgumentElimination: 항상 동일한 상수로 호출되는 경우 함수의 인수를 삭제하는 링크 시간 최적화 패스입니다.
- MinifyImportsAndExports:
"a","b"로 축소합니다. - DeadCodeElimination: 불필요한 코드를 삭제합니다.
최적화 레시피에서 여러 플래그 중에서 더 중요하고 먼저 시도해 볼 만한 플래그를 식별하는 데 도움이 되는 몇 가지 도움말을 확인할 수 있습니다. 예를 들어 wasm-opt를 반복적으로 실행하면 입력이 더 축소되는 경우가 있습니다. 이 경우 --converge 플래그를 사용하여 실행하면 더 이상 최적화가 발생하지 않고 고정점에 도달할 때까지 반복이 계속됩니다.
데모
이 게시물에서 소개된 개념이 실제로 작동하는 모습을 보려면 생각나는 ExampleScript 입력을 제공하여 삽입된 데모를 실행해 보세요. 또한 데모의 소스 코드도 확인하세요.
결론
Binaryen은 언어를 WebAssembly로 컴파일하고 결과 코드를 최적화하기 위한 강력한 도구 키트를 제공합니다. JavaScript 라이브러리와 명령줄 도구는 유연성과 사용 편의성을 제공합니다. 이 게시물에서는 Wasm 컴파일의 핵심 원칙을 설명하고 Binaryen의 효과와 최대 최적화 가능성을 강조했습니다. Binaryen 최적화를 맞춤설정하는 많은 옵션에는 Wasm 내부에 대한 심층적인 지식이 필요하지만 일반적으로 기본 설정으로도 충분합니다. 이제 Binaryen으로 컴파일하고 최적화하세요.