От Rust к WASM с wasm-pack и React

Стандартный процесс преобразования Rust в WASM использует два инструмента: wasm-pack координирует сборку — компилирует Rust в WASM, запускает wasm-bindgen и создаёт пакет npm, — а wasm-bindgen генерирует привязки JavaScript, благодаря которым функции Rust можно вызывать как обычные функции JavaScript с корректной обработкой типов.

Атрибут #[wasm_bindgen] помечает функции, структуры и методы Rust для экспорта в JavaScript. Без него функция компилируется в WASM, но остаётся недоступной из JavaScript. Если вы помечаете функцию атрибутом #[wasm_bindgen], wasm-bindgen создаёт связующий код JavaScript, который обрабатывает преобразование аргументов и возвращаемых значений.

Минимальная экспортируемая функция Rust: use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. Функция принимает два беззнаковых 32-разрядных целых числа и возвращает одно число. wasm-bindgen генерирует JavaScript-код, который вызывает эту функцию с числовыми аргументами и возвращает числовой результат.

Выполните wasm-pack build --target web в каталоге пакета Rust. Эта команда компилирует код Rust в WASM, запускает wasm-bindgen для генерации привязок JavaScript и создаёт каталог pkg/, содержащий двоичный файл .wasm, связующий модуль JavaScript и определения типов TypeScript.

Импортируйте сгенерированный модуль в компонент React: import init, { add } from '../pkg/my_lib'. Функция init загружает и инициализирует двоичный файл WASM; вызовите её один раз в useEffect. После инициализации вызывайте экспортированные функции напрямую: const result = add(2, 3).

Для сложных данных, выходящих за пределы примитивных чисел, wasm-bindgen предоставляет js_sys::Array (массив JavaScript), js_sys::Object (объект JavaScript) и wasm_bindgen::JsValue (любое значение JavaScript). Эти типы позволяют функциям Rust принимать и возвращать массивы и объекты JavaScript, хотя требуют больше накладных расходов на сериализацию, чем примитивные типы.

Ключевой принцип производительности: храните данные в памяти WASM и выполняйте все вычисления там. Передайте данные один раз, выполните вычисления и верните только итоговый результат. Избегайте подходов, при которых данные для каждого шага многократно передаются через границу WASM. Накладные расходы на один переход через границу невелики, но в циклах с большим числом итераций они накапливаются.

Пакет serde-wasm-bindgen позволяет сериализовать структуры Rust в объекты JavaScript и обратно с помощью Serde. Пометьте структуру атрибутом #[derive(Serialize, Deserialize)] и используйте serde_wasm_bindgen::to_value() и from_value(). Это стандартный способ передачи сложных структурированных данных.

Длительные вычисления WASM блокируют поток, в котором они выполняются. Разместите WASM в веб-воркере, чтобы основной поток React оставался свободным. Создайте файл веб-воркера, который инициализирует модуль WASM и обрабатывает сообщения. Отправляйте данные воркеру через postMessage, получайте результаты через событие message, а затем обновляйте состояние React полученным результатом.

wasm-pack автоматически создаёт файлы объявлений TypeScript (.d.ts) для всех экспортируемых функций и типов. Благодаря этому проект React на TypeScript получает полную типобезопасность при вызове функций Rust. Сгенерированные типы соответствуют сигнатурам функций Rust — add(a: number, b: number): number, — поэтому автодополнение в среде разработки работает корректно.

После оптимизации двоичные файлы WASM обычно занимают от 100 КБ до 2 МБ. Включите wasm-opt при сборке wasm-pack, задав opt-level = "z" в профиле release файла Cargo.toml для агрессивной оптимизации размера. Передавайте файлы WASM с заголовком Content-Type: application/wasm и включите HTTP/2, чтобы браузер эффективно загружал двоичный файл потоком.

Каково назначение атрибута #[wasm_bindgen] в коде Rust?

wasm-pack build --target web компилирует Rust в WASM и генерирует привязки JavaScript с помощью wasm-bindgen. Помечайте экспортируемые функции атрибутом #[wasm_bindgen]. Импортируйте init и экспортируемые функции в React, вызывайте init() в useEffect, а затем вызывайте функции как обычные функции JavaScript. Используйте serde-wasm-bindgen для сериализации сложных структур. Запускайте WASM в веб-воркерах при длительных вычислениях, чтобы основной поток React оставался свободным.