Mengompilasi dan mengoptimalkan Wasm dengan Binaryen

Thomas Steiner

Binaryen adalah library infrastruktur compiler dan toolchain untuk WebAssembly, yang ditulis dalam C++. Library ini bertujuan menjadikan kompilasi ke WebAssembly intuitif, cepat, dan efektif. Dalam postingan ini, menggunakan contoh bahasa mainan sintetis yang disebut ExampleScript, pelajari cara menulis modul WebAssembly di JavaScript menggunakan Binaryen.js API. Anda akan membahas dasar-dasar pembuatan modul, penambahan fungsi ke modul, dan mengekspor fungsi dari modul. Ini akan memberi Anda pengetahuan tentang keseluruhan mekanisme kompilasi bahasa pemrograman aktual ke WebAssembly. Selain itu, Anda akan mempelajari cara mengoptimalkan modul Wasm dengan Binaryen.js dan di command line dengan wasm-opt.

Catatan: Nama Binaryen terinspirasi oleh Emscripten. Nama Emscripten menunjukkan bahwa alat ini mengonversi sesuatu menjadi skrip—khususnya JavaScript—dan nama Binaryen menunjukkan bahwa alat ini mengonversi sesuatu menjadi biner—khususnya WebAssembly. Binaryen dimulai sebagai alat pembuatan dan pengoptimalan WebAssembly Emscripten, sehingga namanya sesuai karena mampu memindahkan Emscripten dari sesuatu yang memunculkan format JavaScript berbasis teks (seperti yang terjadi sejak awal) ke format biner WebAssembly (yang telah dilakukan sejak WebAssembly diluncurkan).

Latar Belakang tentang Biner

Binaryen memiliki C API yang intuitif dalam satu header, dan juga dapat digunakan dari JavaScript. Compiler ini menerima input dalam bentuk WebAssembly, tetapi juga menerima grafik alur kontrol umum untuk compiler yang lebih memilihnya.

Representasi perantara (IR) adalah struktur data atau kode yang digunakan secara internal oleh compiler atau virtual machine untuk merepresentasikan kode sumber. IR internal Binaryen menggunakan struktur data yang ringkas dan dirancang untuk pembuatan dan pengoptimalan kode yang sepenuhnya paralel, menggunakan semua core CPU yang tersedia. IR Binaryen dikompilasi ke WebAssembly karena merupakan subset dari WebAssembly.

Pengoptimal Binaryen memiliki banyak penerusan yang dapat meningkatkan ukuran dan kecepatan kode. Pengoptimalan ini bertujuan untuk membuat Binaryen cukup canggih untuk digunakan sebagai backend compiler itu sendiri. Ini mencakup pengoptimalan khusus WebAssembly (yang mungkin tidak dilakukan oleh compiler tujuan umum), yang dapat dianggap sebagai minifikasi Wasm.

AssemblyScript sebagai contoh pengguna Binaryen

Binaryen digunakan oleh sejumlah project, misalnya, AssemblyScript, yang menggunakan Binaryen untuk mengompilasi dari bahasa seperti TypeScript langsung ke WebAssembly. Coba contohnya di playground AssemblyScript.

Input AssemblyScript:

export function add(a: i32, b: i32): i32 {
  return a + b;
}

Kode WebAssembly yang sesuai dalam bentuk teks yang dihasilkan oleh Binaryen:

(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
 )
)

Toolchain Binaryen

Toolchain Binaryen menawarkan sejumlah alat yang berguna bagi developer JavaScript dan pengguna command line. Sebagian alat ini tercantum sebagai berikut; daftar lengkap alat yang terdapat tersedia di file README project.

• binaryen.js: Library JavaScript mandiri yang mengekspos metode Binaryen untuk membuat dan mengoptimalkan modul Wasm. Untuk build, lihat binaryen.js di npm (atau download langsung dari GitHub atau unpkg).
• wasm-opt: Alat command line yang memuat WebAssembly dan menjalankan pass IR Binaryen di dalamnya.
• wasm-as dan wasm-dis: Alat command line yang menyusun dan membongkar WebAssembly.
• wasm-ctor-eval: Alat command line yang dapat menjalankan fungsi (atau bagian dari fungsi) pada waktu kompilasi.
• wasm-metadce: Alat command line untuk menghapus bagian file Wasm dengan cara yang fleksibel yang bergantung pada cara modul digunakan.
• wasm-merge: Alat command line yang menggabungkan beberapa file Wasm menjadi satu file, yang menghubungkan impor yang sesuai ke ekspor saat melakukannya. Seperti bundler untuk JavaScript, tetapi untuk Wasm.

Mengompilasi ke WebAssembly

Kompilasi satu bahasa ke bahasa lain biasanya melibatkan beberapa langkah. Yang paling penting tercantum dalam daftar berikut:

• Analisis leksik: Membagi kode sumber menjadi token.
• Analisis sintaksis: Membuat hierarki sintaksis abstrak.
• Analisis semantik: Periksa error dan terapkan aturan bahasa.
• Pembuatan kode menengah: Membuat representasi yang lebih abstrak.
• Pembuatan kode: Menerjemahkan ke bahasa target.
• Pengoptimalan kode khusus target: Mengoptimalkan target.

Di dunia Unix, alat yang sering digunakan untuk mengompilasi adalah lex dan yacc:

• lex (Lexical Analyzer Generator): lex adalah alat yang menghasilkan penganalisis leksikal, yang juga dikenal sebagai lexer atau pemindai. Fungsi ini mengambil sekumpulan ekspresi reguler dan tindakan yang sesuai sebagai input, serta menghasilkan kode untuk penganalisis leksikal yang mengenali pola dalam kode sumber input.
• yacc (Yet Another Compiler Compiler): yacc adalah alat yang menghasilkan parser untuk analisis sintaksis. Model ini menggunakan deskripsi tata bahasa formal dari bahasa pemrograman sebagai input dan menghasilkan kode untuk parser. Parser biasanya menghasilkan hierarki sintaksis abstrak (AST) yang mewakili struktur hierarki kode sumber.

Catatan: Contoh berikut sangat disederhanakan untuk menyampaikan ide secara keseluruhan tanpa terjebak dalam detail. Metode ini tidak akan menggunakan lex dan yacc, tetapi merupakan ekspresi reguler murni._

Contoh yang berhasil

Mengingat cakupan postingan ini, tidak mungkin untuk membahas bahasa pemrograman lengkap, jadi untuk memudahkan, pertimbangkan bahasa pemrograman sintetis yang sangat terbatas dan tidak berguna yang disebut ExampleScript yang berfungsi dengan mengekspresikan operasi umum melalui contoh konkret.

• Untuk menulis fungsi add(), Anda membuat kode contoh penambahan apa pun, misalnya 2 + 3.
• Untuk menulis fungsi multiply(), Anda menulis, misalnya, 6 * 12.

Sesuai dengan peringatan awal, benar-benar tidak berguna, tetapi cukup sederhana untuk analis leksikal-nya menjadi satu ekspresi reguler: /\d+\s*[\+\-\*\/]\s*\d+\s*/.

Selanjutnya, harus ada parser. Sebenarnya, versi sangat sederhana dari hierarki sintaksis abstrak dapat dibuat menggunakan ekspresi reguler dengan grup pengambilan bernama: /(?<first_operand>\d+)\s*(?<operator>[\+\-\*\/])\s*(?<second_operand>\d+)/.

Perintah ExampleScript adalah satu per baris, sehingga parser dapat memproses kode per baris dengan memisahkan karakter baris baru. Hal ini cukup untuk memeriksa tiga langkah pertama dari daftar berbutir sebelumnya, yaitu analisis leksikografis, analisis sintaksis, dan analisis semantik. Kode untuk langkah-langkah ini ada dalam listingan berikut.

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),
      };
    });
  }
}

Pembuatan kode menengah

Setelah program ExampleScript dapat direpresentasikan sebagai hierarki sintaksis abstrak (meskipun cukup disederhanakan), langkah berikutnya adalah membuat representasi antara abstrak. Langkah pertama adalah membuat modul baru di Binaryen:

const module = new binaryen.Module();

Setiap baris hierarki sintaksis abstrak berisi tiga elemen yang terdiri dari firstOperand, operator, dan secondOperand. Untuk setiap dari empat kemungkinan operator di ExampleScript, yaitu, +, -, *, /, fungsi baru perlu ditambahkan ke modul dengan metode Module#addFunction() Binaryen. Parameter metode Module#addFunction() adalah sebagai berikut:

• name: string, mewakili nama fungsi.
• functionType: Signature, mewakili tanda tangan fungsi.
• varTypes: Type[], menunjukkan lokalitas tambahan, dalam urutan yang diberikan.
• body: Expression, konten fungsi.

Ada beberapa detail lainnya yang perlu diselesaikan dan diuraikan. dokumentasi Biner dapat membantu Anda menjelajahi ruang tersebut. Namun pada akhirnya, untuk operator + ExampleScript, Anda menggunakan metode Module#i32.add() sebagai salah satu dari beberapa operasi bilangan bulat yang tersedia. Penambahan memerlukan dua operand, penjumlah pertama dan kedua. Agar fungsi dapat dipanggil, fungsi tersebut harus diekspor dengan 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');

Setelah memproses hierarki sintaksis abstrak, modul ini berisi empat metode, tiga bekerja dengan bilangan bulat, yaitu add() berdasarkan Module#i32.add(), subtract() berdasarkan Module#i32.sub(), multiply() berdasarkan Module#i32.mul(), dan outlier divide() berdasarkan Module#f64.div() karena ExampleScript juga berfungsi dengan hasil floating point.

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 `/`.

Jika Anda menangani basis kode sebenarnya, terkadang akan ada kode mati yang tidak pernah dipanggil. Untuk memperkenalkan kode mati secara artifisial (yang akan dioptimalkan dan dihilangkan pada langkah berikutnya) dalam contoh kompilasi ExampleScript yang sedang berjalan ke Wasm, menambahkan fungsi yang tidak diekspor akan melakukan tugas tersebut.

// 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)),
  ]),
);

Sekarang compiler hampir siap. Hal ini tidak mutlak diperlukan, tetapi merupakan praktik yang baik untuk memvalidasi modul dengan metode Module#validate().

if (!module.validate()) {
  throw new Error('Validation error');
}

Catatan: Contoh pengantar ini hanya membahas sedikit, tetapi Anda dapat mengekstrapolasi dari sini jika ingin mengompilasi bahasa pemrograman sebenarnya tempat Anda perlu merepresentasikan lebih banyak operasi dan alur kontrol. Misalnya, loop dengan Module#loop() atau kondisional seperti pernyataan if dengan Module#if().

Mendapatkan kode Wasm yang dihasilkan

Untuk mendapatkan kode Wasm yang dihasilkan, ada dua metode di Binaryen untuk mendapatkan representasi tekstual sebagai file .wat dalam ekspresi S sebagai format yang dapat dibaca manusia, dan representasi biner sebagai file .wasm yang dapat langsung dijalankan di browser. Kode biner dapat dijalankan langsung di browser. Untuk melihat apakah proses ini berhasil, logging ekspor dapat membantu.

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);

Representasi tekstual lengkap untuk program ExampleScript dengan keempat operasi tercantum di bawah ini. Perhatikan bahwa kode mati masih ada, tetapi tidak ditampilkan sesuai screenshot 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)
  )
 )
)

Mengoptimalkan WebAssembly

Binaryen menawarkan dua cara untuk mengoptimalkan kode Wasm. Satu di Binaryen.js itu sendiri, dan satu untuk command line. Yang pertama menerapkan kumpulan aturan pengoptimalan standar secara default dan memungkinkan Anda menetapkan tingkat pengoptimalan dan penyingkatan, dan yang kedua secara default tidak menggunakan aturan, tetapi memungkinkan penyesuaian penuh, yang berarti bahwa dengan eksperimen yang cukup, Anda dapat menyesuaikan setelan untuk hasil yang optimal berdasarkan kode Anda.

Mengoptimalkan dengan Binaryen.js

Cara paling mudah untuk mengoptimalkan modul Wasm dengan Binaryen adalah dengan langsung memanggil metode Module#optimize() dari Binaryen.js, dan secara opsional menetapkan tingkat pengoptimalan dan penyingkatan.

// 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();

Tindakan ini akan menghapus kode mati yang diperkenalkan secara artifisial sebelumnya, sehingga representasi tekstual dari contoh mainan ExampleScript versi Wasm tidak lagi berisinya. Perhatikan juga cara pasangan local.set/get dihapus oleh langkah pengoptimalan SimplifyLocals (pengoptimalan terkait lokalitas lainnya) dan Vacuum (menghapus kode yang jelas tidak diperlukan), dan return dihapus oleh RemoveUnusedBrs (menghapus jeda dari lokasi yang tidak diperlukan).

 (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)
  )
 )
)

Ada banyak pass pengoptimalan, dan Module#optimize() menggunakan set default optimalkan dan tingkat penyusutan tertentu. Untuk penyesuaian penuh, Anda perlu menggunakan alat command line wasm-opt.

Mengoptimalkan dengan alat command line wasm-opt

Untuk penyesuaian sepenuhnya pada kartu yang akan digunakan, Binaryen menyertakan alat command line wasm-opt. Untuk mendapatkan daftar lengkap opsi optimasi yang mungkin, periksa pesan bantuan alat. Alat wasm-opt mungkin adalah alat yang paling populer, dan digunakan oleh beberapa toolchain compiler untuk mengoptimalkan kode Wasm, termasuk Emscripten, J2CL, Kotlin/Wasm, dart2wasm, wasm-pack, dan lainnya.

wasm-opt --help

Untuk memberi Anda gambaran tentang kartu, berikut adalah cuplikan dari beberapa kartu yang dapat dipahami tanpa pengetahuan pakar:

• CodeFolding: Menghindari kode duplikat dengan menggabungkannya (misalnya, jika dua grup if memiliki beberapa petunjuk bersama di ujungnya).
• DeadArgumentElimination: Penerusan pengoptimalan waktu link untuk menghapus argumen ke fungsi jika selalu dipanggil dengan konstanta yang sama.
• MinifyImportsAndExports: Melakukan minifikasi ke "a", "b".
• DeadCodeElimination: Menghapus kode mati.

Ada buku resep pengoptimalan yang tersedia dengan beberapa tips untuk mengidentifikasi tanda mana yang lebih penting dan layak dicoba terlebih dahulu. Misalnya, terkadang menjalankan wasm-opt berulang kali akan memperkecil input lebih lanjut. Dalam kasus tersebut, menjalankan dengan tanda --converge akan terus melakukan iterasi hingga tidak ada pengoptimalan lebih lanjut yang terjadi dan titik tetap tercapai.

Demo

Untuk melihat penerapan konsep yang diperkenalkan dalam postingan ini, mainkan demo tersemat yang memberikan input ExampleScript apa pun yang dapat Anda pikirkan. Pastikan juga untuk melihat kode sumber demo.

Kesimpulan

Binaryen menyediakan toolkit canggih untuk mengompilasi bahasa ke WebAssembly dan mengoptimalkan kode yang dihasilkan. Library JavaScript dan alat command line-nya menawarkan fleksibilitas dan kemudahan penggunaan. Postingan ini menunjukkan prinsip inti kompilasi Wasm, yang menyoroti efektivitas dan potensi pengoptimalan Binaryen untuk pengoptimalan maksimum. Meskipun banyak opsi untuk menyesuaikan pengoptimalan Binaryen memerlukan pengetahuan mendalam tentang internal Wasm, biasanya setelan default sudah berfungsi dengan baik. Dengan demikian, selamat mengompilasi dan mengoptimalkan dengan Bineren!

Ucapan terima kasih

Postingan ini ditinjau oleh Alon Zakai, Thomas Lively, dan Rachel Andrew.