多编译内核生态下的极速研发体验

1. 多编译内核生态下的极速研发体验朱天健京东 · 凹凸实验室

2. 目录 01 背景 02 极速构建 03 总结与展望

3.

4.

5. 多编译内核生态

6. 多编译内核生态 Webpack …

7. 多编译内核生态 React Native 生态 Webpack 方案编译 Metro 方案使用 metro 编译内核，更贴合 React Native 生态体系

8. 多编译内核生态社区呼声通过 vite 编译内核提升 Web 端研发体验

9. 面向多终端研发

10. 面向多终端研发编译系统小程序 Web OpenHarmony 快应用 React Native

11. 面向多终端研发编译系统一致性通过标准配置能力，为不同编译内核提供多终端编译特性，提供一致的研发体验。框架生态插件系统提供一致的编译生命周期，兼容多内核生态。

12. 面向多终端研发 ……

13. 极速构建多编译内核生态

14. 多编译内核架构 CLI 插件系统开发范式编译核心运行环境运行平台 React Vue jQuery ...... Webpack / Vite 小程序 Web 端的渲染规范 Web OpenHarmony 小程序标准的组件库 Metro 快应用 React Native 小程序标准的 API 库

15. Webpack 编译内核

16. Webpack 编译内核

17. Webpack 编译内核构建体验持久化缓存依赖预编译配置工具

18. Webpack 编译内核 PreBundle

19. Webpack 编译内核 PreBundle 小程序 Scan Bundle Remote App Host App

20. Webpack 编译内核 PreBundle 小程序 Scan 使用 ESBuild 收集项目内已使用的 js 模块注意： 1. TS + Vue <script setup> 语法可能被误判被移除，需设置副作用避免遗漏依赖； 2. 需根据 TARO_ENV 等环境变量移除无关依赖。

21. Webpack 编译内核 PreBundle 小程序 Bundle 使用 ESBuild 打包用户配置和收集的模块，并通过 SWC 优化代码的编译能力，基于 CommonJS 的依赖转换 ESM 后的编译结果进行兼容。 Scan Dependencies 注意： ESBuild Entry Plugin SWC Plugin ESBuild Bundle Modules (Cache) 多模块使用 ESBuild 输出嵌套路径的难以分析预测，故消除路径中的 / 将其扁平化输出，并在插件中通过 virtual module 保留原始 path。

22.

23. Webpack 编译内核 PreBundle Web Scan Bundle Remote App Host App Proxy

24. Webpack 编译内核 PreBundle Web Remote App TaroContainerPlugin 使用指定的公开模块来创建额外的容器入口。使用 MF 构建 Remote 应用 Bundle Modules (ESBuild) Webpack (Module Federation) TaroModuleFederationPlugin (TaroContainerPlugin) Remote App (Cache) 注意： Web 端环境中不需要通过 ProvidePlugin 注入额外的 @tarojs/runtime ，且同步模式会导致页面加载冗余等问题，降低实际用户体验，故在这里与小程序有所区分。

25. Webpack 编译内核 PreBundle Web TaroContainerReferencePlugin Host App 为 Host 应用添加 MF 配置 Webpack (Module Federation) Remote App (Cache) TaroModuleFederationPlugin (TaroContainerReferencePlugin) Remote App Assets MFPlugin Config （Host App） - 将预编译的依赖修改为远程模块 - 将特定的引用添加到作为外部资源的容器 - 允许从这些容器中导入远程模块 - 注入所需的 webpack 工具函数。

26. Webpack 编译内核 PreBundle Web Proxy 为 Remote 应用提供静态服务，供 Host 应用加载依赖时使用注意： MF 模块会异步加载，可以通过 virtual- modules 将 App 或页面入口嵌套一层异步加载避免依赖错误。

27. Webpack 编译内核 PreBundle 性能测试 17.5 优化前预加载 3 小程序端 79 优化前预加载 24 Web 端使用 NutUI 示例项目测试

28. Webpack 编译内核小程序中使用模块联邦 Module Federation 如何在小程序中使用模块联邦？

29. Webpack 编译内核 Module Federation ModuleFederationPlugin ContainerReferencePlugin (Host App) ContainerPlugin (Remote App) SharePlugin TaroModuleFederationPlugin TaroContainerReferencePlugin Module Federation (Host App) SharePlugin TaroContainerPlugin (Remote App)

30. Webpack 编译内核 Module Federation Webpack 创建额外的容器入口 TaroContainerPlugin 自动注册模块的逻辑 Module Federation 劫持 ContainerEntryDependency，通过插入 taroModuleMap 将异步逻辑改为同步。 Remote App 注意：需要收集使用到的 webpack 工具函数，并删除冗余的入口、runtime 等 chunk。

31. Webpack 编译内核 Module Federation Webpack TaroContainerReferencePlugin 预编译依赖改为远程模块需同时注入所需的 webpack 模块插入自动注册模块的逻辑修改 webpack/runtime/remotes 模块的输出生成 id 映射对象 idToExternalAndNameMappin app.js 注入 require 依赖所有预编译的 chunk 和 remoteEntry Host App 注意：需要移除小程序环境中不需要的远程加载模块，减少不必要的代码输出。

32. Webpack 编译内核 PreBundle 第三方使用预构建依赖和指定模块、页面

33. Vite 编译内核

34. Vite 编译内核依赖打包的开发服务启动项目时，需优先扫描整个项目依赖和代码，并在应用完成构建后提供服务。依赖 ESM 环境的开发服务使用 ESBuild 构建依赖，并在浏览器请求源码时，将对应模块转换为原生 ESM，按需提供源码。

35. Vite 编译内核 Web 端适配小程序特性 Webpack 内核支持小程序路由、Tabbar 等特性，兼容各 API、跨框架组件库配置。支持 webpack 编译内核已经支持的各种特性，如 React、Preact 等 DSL 模块，多路由模式…… 提供适配 Web 端的 Vite 插件

36. Vite 编译内核小程序端适配 module (virtual) page.config (router) 写入 App Build app.config (entry) module (virtual) page.config (router) module (virtual) module (virtual) … … import 提供适配小程序端的 Vite 插件

37. Vite 编译内核

38. Vite 编译内核 CLI Init 配置模板 … 钩子 Vite 配置编译能力框架配置样式 ES5 TS SourceMap sass less stylus resolve 静态资源压缩 PostCSS 内置 PostCSS CSS Module 小程序 H5 DSL 各小程序兼容 Tabbar CustomWrapper 分包原生组件/插件 DarkMode DSL Server Tabbar 样式 API HMR 生成模式路由模式首次启动耗时跨框架组件库兼容组件库特殊编译模式智能提取分包依赖小程序组件预渲染独立分包原生组件 …

39. Vite 编译内核可能遇到的问题循环依赖打包输出 CJS 格式在配置 splitchunk 后可能产生循环依赖，并导致运行报错。 - 01 - 编译缓存由于缺少持久化缓存能力支持，较 webpack5 相比编译速度会慢。 - 02 -

40. Metro 编译内核

41. Metro 编译内核 taro build —type rn —watch config @tarojs/ rn-runner (metro) react-native start JSBundle listen: 8081

42. Metro 编译内核 taro build —type rn —watch config @tarojs/router-rn @tarojs/ rn-runner (metro) React Navigation 合并 metro.config.js @tarojs/runtime-rn @tarojs/rn-transformer @tarojs/rn-style-transformer index.ts react-native start index.bundle?platform=[platform] JSBundle listen: 8081

43. Metro 编译内核编译性能打包优化生态支持提升编译速度，提供更好的规避由于 webpack 提供的与 React Native 默认配置保 SourceMap 支持，提升研发效多 entry 模式导致的问题，并降持一致，支持更灵活的合并方式率和体验。低包体大小…… 。

44. Metro 编译内核构建流程 taro build —type rn —watch react-native start RN Runner metro server Transformer @tarojs/rn-transformer @tarojs/rn-style-transformer index.bundle?platform=[platform] index.ts Runtime @tarojs/taro-rn @tarojs/component-rn @tarojs/router-rn

45. Metro 编译内核原生 React Native 应用支持 @tarojs/rn-supporter App Config Taro Config MetroConfig 支持框架提供的编译、运行时配置，和资源样式解析方案

46. Metro 编译内核原生 React Native 应用支持注意：路由导航相关需要自行处理

47. 编译系统 CLI 插件系统编译核心

48. 编译系统拓展编译过程 taro build —type [platform] [—watch] 编译 CLI 注入运行时依赖加载平台插件编译结果

49. 编译系统插件系统命令行扩展 - registerCommand 编译过程扩展 - onBuildStart - onCompilerMake - modifyWebpackChain - modifyBuildAssets … 编译平台拓展 - registerPlatform

50. 编译系统插件系统 DSL 插件端平台插件 … …

51. 编译系统插件系统语法拓展 React Vue2 Vue3 ...... 自定义插件 ...... 纵向拓展 QQ 插件阿里系小程序插件已支持的平台微信插件支付宝插件横向拓展 ...... ...... 快手插件功能模块插件化系统编译时运行时 ......

52. 生态工具链 SWC 标准语法对标 Babel 特性支持支持 ES5 语法编译支持 browserlist、target 等常用特性，以及很多 Babel 内置插件；但作用支持 JSX、React、TS；支持使用 JS 编写插件，后续会也将支持使用 Rust 编域隔离等与 Babel 存在差异或缺失…… 写插件。使用 @swc/register 代替 @babel/register 提升 config.js 加载速度

53. 生态工具链 ESBuild JS 代码压缩 CSS 压缩

54. 总结与展望

55. 总结开放式跨端跨框架解决方案语法 React 标准编译系统 Vue Web 端的渲染规范 jQuery 小程序标准的组件库小程序 Taro 插件系统 React 适配器模拟 DOM Vue 适配器模拟 BOM 小程序渲染层运行平台小程序标准的 API 库编译核心 CLI Web OpenHarmony 快应用 Webpack / Vite 小程序运行时 ...... Metro Web 数据序列化 React 适配器 Vue 适配器路由 API 库 React Native React Native 跨框架组件库 WebComponents 路由库组件库 API 库 Expo React Native 0.70

56. 展望未来前端 UI 框架支持更多类型的前端 UI 框架，为开发者的研发流程提供更多可选项。性能优化为小程序提供更好的热重载、预渲染等能力，提升多端研发体验，提供适用于更多场景的多端性能优化方案。同时根据场景提示性能优化方案，以及性能指标测 … 评工具，为项目优化提供指引。

57. 展望未来 Flutter Web Assembly Test Renderer

58. 展望未来技术委员会

59. 感谢大家观看