{"draftJsState":{"blocks":[{"data":{"image":{"id":"64d217d895597b5b977da466"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cqa05"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":29,"offset":0}],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"}],"text":"Оригинал статьи на моём сайте","type":"unstyled","key":"eg22l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":47,"style":"BOLD"},{"length":11,"offset":55,"style":"BOLD"},{"length":10,"offset":101,"style":"BOLD"},{"length":6,"offset":192,"style":"BOLD"},{"length":10,"offset":217,"style":"BOLD"},{"length":4,"offset":338,"style":"BOLD"},{"length":4,"offset":377,"style":"BOLD"},{"length":7,"offset":582,"style":"BOLD"}],"text":"Когда перед вами стоит задача использовать код С/С++ в WebAssembly, то первое, что вы услышите - это Emscripten. Это не компилятор, а целый набор инструментов, который не только скомпонует вам C/C++ код, но и добавит JavaScript прослойку и даже реализацию стандартной библиотеки. Это действительно очень удобное решение. Тем более раньше LLVM в ранних версиях не умел выдавать wasm сборку. Поэтому Emscripten имеет очень богатую историю своих решений. Но что, если ваш код будет сразу ориентирован на запуск и работу в браузере? Или вы действительно хотите разобраться как работает wasm+js? Поэтому отбросим весь лишний контекст и начнём с чего-то очень простого.","type":"unstyled","key":"bsrlg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка LLVM","type":"header-two","key":"552d4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":37,"style":"BOLD"},{"length":10,"offset":68,"style":"BOLD"},{"length":4,"offset":123,"style":"BOLD"}],"text":"Для компиляции мы будем использовать LLVM (он так же используется в Emscripten под капотом). Как установить готовую сборку LLVM на разные системы вы найдёте в официальном гайде. ","type":"unstyled","key":"2nb2o"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":41,"offset":18}],"inlineStyleRanges":[{"length":4,"offset":109,"style":"BOLD"},{"length":3,"offset":181,"style":"BOLD"},{"length":5,"offset":208,"style":"BOLD"},{"length":11,"offset":244,"style":"BOLD"},{"length":8,"offset":262,"style":"BOLD"},{"length":6,"offset":274,"style":"BOLD"},{"length":18,"offset":297,"style":"BOLD"}],"text":"Достаточно просто найти на странице с официальными сборками подходящий для вашей платформы заранее собранный LLVM. Дальше скачиваем и распаковываем, вам необходимо чтобы была папка bin, а в ней хотя бы лежал clang компилятор. Я лично установил llvm 16.0.2 через homebrew на macos простой командой: brew install llvm.","type":"unstyled","key":"6bndi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":45,"style":"BOLD"},{"length":4,"offset":73,"style":"BOLD"}],"text":"Для удобства мы добавим папку \"/path/to/LLVM/bin\" в переменную окружения PATH, чтобы напрямую работать с компилятором. Проверим, что всё правильно:","type":"unstyled","key":"e00he"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$ clang --version","type":"blockquote","key":"13n8b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Homebrew clang version 16.0.2\nTarget: x86_64-apple-darwin22.4.0\nThread model: posix\nInstalledDir: /usr/local/Cellar/llvm/16.0.2/bin","type":"blockquote","key":"8o9d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пишем main.c","type":"header-two","key":"fcaua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":37,"style":"BOLD"}],"text":"Для теста напишем простейшую функцию add(x,y) которая будет возвращать сумму двух чисел","type":"unstyled","key":"3gskv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"double add(double x, double y) {\n return x + y;\n}","type":"blockquote","key":"9a5mf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компилируем main.c","type":"header-two","key":"eqbf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Один файл можно собрать очень быстро одной строчкой кода","type":"unstyled","key":"6jp8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"clang --target=wasm32 -nostdlib -Wl,--no-entry -Wl,--export-all -o main.wasm main.c","type":"blockquote","key":"3d8a9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Краткое описание используемых флагов:","type":"unstyled","key":"2mtkm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"},{"length":4,"offset":47,"style":"BOLD"}],"text":"--target=wasm32 - указываем, что нужно собрать wasm для браузера","type":"unordered-list-item","key":"7rur1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":4,"offset":63,"style":"BOLD"},{"length":31,"offset":74,"style":"BOLD"}],"text":"-nostdlib - не используем никаких стандартных библиотек языка (libc), нам не нужны memcpy, malloc, printf, и так далее","type":"unordered-list-item","key":"8rlbn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"-Wl, - все эти флаги указаны для компоновщика","type":"unordered-list-item","key":"edejg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":14,"offset":50,"style":"BOLD"},{"length":2,"offset":11,"style":"ITALIC"}],"text":"--no-entry - нам не нужна точка входа в программу int main(void)","type":"unordered-list-item","key":"arjv1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"--export-all - пока экспортируем из нашего модуля всё что есть (вернёмся к этому флагу в разделе оптимизации размера сборки)","type":"unordered-list-item","key":"a7nam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запускаем main.wasm в браузере","type":"header-two","key":"ak71u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":29,"style":"BOLD"}],"text":"Для этого оформим простейший index.html, добавим загрузку и инициализацию нашего модуля","type":"unstyled","key":"2kkf8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":10,"style":"ITALIC"},{"length":4,"offset":22,"style":"ITALIC"},{"length":4,"offset":83,"style":"ITALIC"},{"length":6,"offset":182,"style":"ITALIC"}],"text":"\n\n\n \n\n\n\n\n","type":"blockquote","key":"3esov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":82,"style":"BOLD"}],"text":"Если вы запустите этот файл в браузере, то получите ошибку, мы не можем загрузить main.wasm из файловой системы, поэтому воспользуемся локальным сервером:","type":"unstyled","key":"6h64d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npx serve","type":"blockquote","key":"d6dpi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":25,"style":"BOLD"}],"text":"Теперь, когда мы откроем http://localhost:3000, мы можем посмотреть в консоль и увидеть следующий результат:","type":"unstyled","key":"efkbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"add(1.1, 1.9) = 3","type":"blockquote","key":"3bv19"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простая оптимизация размера","type":"header-two","key":"eot33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":17,"style":"BOLD"},{"length":8,"offset":36,"style":"BOLD"}],"text":"У меня получился main.wasm размером 484 байт. Мы уже указали не использовать стандартную библиотеку, но не используем никаких флагов оптимизации. Дальше постараемся разобраться как оптимизировать размер нашей сборки.","type":"unstyled","key":"4hjic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":28,"style":"BOLD"},{"length":8,"offset":82,"style":"BOLD"}],"text":"Если мы просто добавим флаг -Oz в команду сборки, то файл немного уменьшается, до 367 байт. ","type":"unstyled","key":"fi3nr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":69,"style":"BOLD"},{"length":10,"offset":115,"style":"BOLD"}],"text":"Дальше попробуем обрезать всё лишнее из файла флагом для компановщика -Wl,--strip-all. Теперь наш файл занимает уже 272 байта.","type":"unstyled","key":"q0ja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":32,"style":"BOLD"},{"length":13,"offset":176,"style":"BOLD"},{"length":10,"offset":57,"style":"ITALIC"}],"text":"Если мы посмотрим какие символы main.wasm доступны нам в JavaScript, то увидим много полезных вещей, но нами они не используются, это происходит потому, что мы используем флаг --export-all для простоты.","type":"unstyled","key":"9lplr"},{"data":{"image":{"id":"64d20a6165b8bf655fa9b7c4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"console.table(source.instance.exports)","type":"atomic:image","key":"3lh0q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":7,"style":"BOLD"},{"length":20,"offset":28,"style":"BOLD"},{"length":3,"offset":209,"style":"BOLD"},{"length":6,"offset":303,"style":"BOLD"}],"text":"Заменим -Wl,--export-all на -Wl,--export-dynamic - теперь мы сами будем выбирать какие функции мы хотим экспортировать в JavaScript. Если вы пересоберете нашу сборку и запустите, то увидите ошибку, что метода add не существует. Поэтому давайте просто укажем что мы хотим его экспортировать, изменим наш main.c","type":"unstyled","key":"69qns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"__attribute__((visibility(\"default\")))\ndouble add(double x, double y) {\n return x + y;\n}","type":"blockquote","key":"mout"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":29,"style":"BOLD"}],"text":"Теперь пересобираем с флагом -Wl,--export-dynamic","type":"unstyled","key":"1dv6o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"clang -Oz --target=wasm32 -nostdlib -Wl,--strip-all -Wl,--no-entry -Wl,--export-dynamic -o main.wasm main.c","type":"blockquote","key":"dcd46"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":7,"style":"BOLD"},{"length":13,"offset":24,"style":"BOLD"}],"text":"Размер main.wasm теперь всего 55 байт! А таблица экпортов содержит только нашу функцию.","type":"unstyled","key":"dtsff"},{"data":{"image":{"id":"64d20b79cdf47f6a060fed47"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ура! Теперь мы видим только нашу Си функцию","type":"atomic:image","key":"42b3k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":11,"style":"BOLD"},{"length":14,"offset":78,"style":"BOLD"},{"length":9,"offset":132,"style":"BOLD"},{"length":5,"offset":149,"style":"BOLD"},{"length":7,"offset":198,"style":"BOLD"}],"text":"Эту сборку 55 байт по размеру теперь можно сравнить с аналогичным примером из AssemblyScript (из-за того что они включают ссылку на sourceMap внутри wasm - их размер идентичного примера занимает аж 96 байт).","type":"unstyled","key":"16pvf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"10tp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":32,"style":"BOLD"},{"length":5,"offset":69,"style":"BOLD"},{"length":11,"offset":110,"style":"BOLD"},{"length":5,"offset":146,"style":"BOLD"},{"length":2,"offset":168,"style":"BOLD"},{"length":11,"offset":77,"style":"ITALIC"},{"length":10,"offset":90,"style":"ITALIC"},{"length":6,"offset":103,"style":"ITALIC"}],"text":"Теперь у нас есть установленный LLVM. Мы научились компилировать наш C код в минимальную, компактную и чистую WebAssembly сборку. Можем загрузить wasm модуль и вызвать Си функцию. Познакомились с некоторыми флагами компиляции и компоновки для оптимизации размера.","type":"unstyled","key":"59ihm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":60,"style":"BOLD"},{"length":33,"offset":113,"style":"BOLD"},{"length":8,"offset":151,"style":"BOLD"}],"text":"В следующем уроке попробуем написать целый тест, узнаем как вызывать JavaScript функцию из C, будем использовать встроенные инструкции WebAssembly без ","type":"unstyled","key":"blf94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеюсь, что у вас всё получилось и статья вам понравилась!","type":"unstyled","key":"ph5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a1eon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"hq1kTEJ7KlDpmse4Bzbi"}],"entityMap":{"0":{"data":{"url":"https://eliasku.win/ru/blog/wasm/1/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://github.com/llvm/llvm-project/releases"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}