webpack wasm challenge

《Webpack Wasm Challenge》总结 该文档主要围绕Webpack支持WebAssembly（WASM）的挑战与解决方案展开，内容涵盖技术实现、目标、问题及未来计划。以下是核心内容的总结： ### 1. **问题与解决方案** Webpack在支持WASM时遇到了一些技术挑战，初步解决方案包括： - 重写WASM二进制，移除启动部分。 - 将导入的全局变量改写为可变全局变量。 - 创建新的导出函数`_webpack_init_`，设置全局变量并调用旧的启动函数。 - 使用弹簧_trampoline_函数包装导入函数。 - 启用函数的即时绑定。 - 所有内容最终被编译为JavaScript。 ### 2. **Webpack的改进计划** 为了支持WASM，Webpack计划： - **增加对多种模块类型的支持**，包括JS/Auto、JS/ESM、WASM、JSON和CSS（后者需单独插件）。 - **支持每个代码块发出多个资产**，以推动WASM和Rust等语言的发展。 ### 3. **开发目标** - **易用性**：隐藏技术细节，用户无需关注高级语言（如C/C++、Rust）。 - **高性能**：在运行时和构建过程中都实现高效。 - **模块化**：WASM文件作为模块，与ESM良好集成，支持代码分割。 ### 4. **实现思路** Webpack团队从原型开发开始，通过迭代解决问题，最终实现目标。**关键技术点**包括： - 检测特殊情况，将初始化表达式移至`_webpack_init_`函数。 - 在运行时代码中处理导出和导入问题。 - 使用`instantiateStreaming`代替`compileStreaming`和同步`instantiate`。 ### 5. **遇到的问题** - **浏览器兼容性**：Chrome在同步实例化大于4KB的二进制文件时报错，Safari在`instantiate`阶段编译。 - **依赖关系**：依赖项按导入顺序被加载。 ### 总结 Webpack团队通过迭代开发和技术改进，逐步实现了对WASM的支持，力求在易用性、高性能和模块化方面达到最佳效果。尽管遇到了一些浏览器兼容性和技术挑战，但通过调整实现策略和运行时代码，最终实现了目标。