WEBPACK + WEBASSEMBLY W E B P A C K A N D T H E C H A L L E N G E O F W E B A S S E M B L Y INTRODUCTION WEBASSEMBLY AND ESM WEBASSEMBLY? • LOW-LEVEL BINARY FORMAT FOR CODE • TYPED (I8 – I64, F32 FROM NATIVE LANGUAGES (C/C++, RUST, …) • ASSEMBLY-LIKE TEXTUAL REPRESENTATION (WAT) • WASM = WEBASSEMBLY STRUCTURE OF A WASM-FILE • MULTIPLE SECTIONS: • IMPORT • GLOBALS • FUNCTION-TYPES • CODE $getNumber_type) (result i32) (i32.const 40) ) ) WEBASSEMBLY API • 1. FETCH THE BINARY • 2. COMPILE A WebAssembly.Module • 3. INSTANCIATE A WebAssembly.Instance • AN importsObject CAN BE PASSED • 4

件开发者调试和线上质量改 进 WebAssembly作为一种新的 面向web的二进制格式，从 设计之初，就以其高效和可 陈映平 陈映平（程序猿小卡），云汉金融科技前端负 责人，前IMWEB团队成员，专注前端技术与架 构设计。 WebAssembly：面向 未来的web开发 移植性吸引了众多开发者的 关注。本次分享将对 WebAssembly进行总览性的 介绍，同时结合当下开发实 介绍，同时结合当下开发实 践，展望WebAssembly的未 来。 方应杭 方应杭，饥人谷联合创始人，曾就职于阿里巴 巴B2B和腾讯IMWeb。 2012年就职于腾讯IMWeb，负责IMQQ官网已 经公司内部产品体验环境优化。 2014年就职于阿里巴巴B2B，负责1688商家平 台前端开发。 现在在饥人谷从事前端培训行业。 我从TJ身上学到了什 么 1. 从 Ruby 社区学习 2. 从

? ? • • STYLES.JS 10BYTES • stylesheet 9 ?? ?? ?? 14kb javascript 1.2kb runtime 20kb webassembly 100kb stylesheet 10 ? ? ? undefined is not a function ❌ • 11 ??? ? ?? “>=8.9.0 OBJECT FROM FILESYSTEM • • • 35 ??? PLUGINS: ?? ??? • • • EXTENSIBLE • OTHER SOURCE TYPES • WEBASSEMBLY, RUNTIME • STYLESHEET 36 ??? ? ?? • • • QUEUES • PLUGINS • 37 ?? ? ?? • • •

THE sideEffects FLAG • MODULE TYPES: NATIVE SUPPORT FOR: • JS (CJS/AMD/ESM) • JSON • WASM (WEBASSEMBLY MODULE) JAN 2018: ALPHA VERSION WEBPACK 4 • webpack-cli • NOW A SEPARATE MODULE • SEPARATE NEW FEATURES WITHOUT BREAKING CHANGE: • splitChunks.maxSize • /* webpackPrefetch: true */ • WEBASSEMBLY IMPROVEMENTS • DefinePlugin.runtimeValue • … • ALSO A LOT OF BUGFIXES, TESTS, LINTING, CI, ETC

COMPATIBILITY NO NODE.JS BUILT-IN MODULE POLYFILLS NEW SPECS JSON MODULES (EXPERIMENT) NEW WEBASSEMBLY MODULES EASE OF USE FOR LONG TERM CACHING DETERMINISTIC BY DEFAULT IMPROVED NAMES FOR DEBUGGING

Applications. Other languages exist, but all must compile to JavaScript - or more recently to WebAssembly, but this is another story. In the beginning, JavaScript was not nearly powerful as it is today

引擎正在快速发展，性能将越来 越好。 此外，还有一种 WebAssembly 格式，它是 JavaScript 引擎的中 间码格式，全部都是二进制代码。由于跳过了编译步骤，可以达到接近 强大的性能 导论 - 15 - 本文档使用 书栈(BookStack.CN) 构建 原生二进制代码的运行速度。各种语言（主要是 C 和 C++）通过编译 成 WebAssembly，就可以在浏览器里面运行。 （3）事件驱动和非阻塞式设计。 入了下一个阶段，成为一种企业级的、开发大规模应用的语言。这个标 准从提出到批准，历时10年，而 JavaScript 语言从诞生至今也已 经20年了。 2015年6月，Mozilla 在 asm.js 的基础上发布 WebAssembly 项目。这是一种 JavaScript 引擎的中间码格式，全部都是二进制， 类似于 Java 的字节码，有利于移动设备加载 JavaScript 脚本， 执行速度提高了 20+ 倍。这意味着将来的软件，会发布 本相比，它只增加了两个较小的特性。 2017年6月，《ECMAScript 2017 标准》发布，正式引入了 async 函数，使得异步操作的写法出现了根本的变化。 2017年11月，所有主流浏览器全部支持 WebAssembly，这意味着任 何语言都可以编译成 JavaScript，在浏览器运行。 Axel Rauschmayer, The Past, Present, and Future of JavaScript

模式对比 Canvaskit Render 模式：底层基于 Skia 的 WebAssembly 版本，而上层使 用 WebGL 进行渲染，因此能较好地保证一致性和滚动性能，但糟糕的兼容性 （WebAssembly 从 Chrome 57 版本才开始支持）是我们需要面对的问题。此外 Skia 的 WebAssembly 文件大小达到了 2.5M，且 Skia 自绘引擎需要字体库支持， 这意