《朱鸣辉-跨端框架的编译优化实践.pdf》由会员分享,可在线阅读,更多相关《朱鸣辉-跨端框架的编译优化实践.pdf(55页珍藏版)》请在三个皮匠报告上搜索。
1、跨端框架的编译优化实践主讲人:朱鸣辉演讲嘉宾介绍朱鸣辉 京东凹凸实验室 京东资深研发工程师 Taro团队核心成员 负责Taro框架的研发和开源管理工作CONTENT目录2023K+01跨端技术需要解决什么问题高拓展性的开放式架构编译内核020304展望未来Part 01跨端技术需要解决什么问题跨端技术需要解决什么问题业务响应不及时研发成本增加代码维护困难多框架支持性能优化插件化跨端技术需要解决什么问题跨端技术需要解决什么问题支持更多的开发范式&UI 框架跨端技术需要解决什么问题支持更多的前端生态工具链&上层框架跨端技术需要解决什么问题开放式跨端跨框架解决方案Part 2高拓展性的开发式架构 架
2、构介绍 web适配 小程序适配高拓展性的开发式架构Taro 1.x 架构高拓展性的开发式架构Taro 3.x 架构高拓展性的开发式架构插件化架构高拓展性的开发式架构Web端适配标准组件库实现Taro 标准的 Web 端组件库标准 API、事件实现 Taro 标准的 Web 端 API路由库实现 Taro 标准的 Web 端路由库支持跨前端 UI 框架(React、Vue 等)可适配支持开发者自定义封装 API 支持各 UI 框架生态路由库使用框架适配器实现 Taro 标准前端 UI 框架(React、Vue)适配器并使框架组件、生命周期对齐标准第三发接入第三方工具接入 Taro 组件库、API
3、 等使用方法(Taro 插件化、标准配置方案等)高拓展性的开发式架构web端适配-H5架构Taro-H5 架构高拓展性的开发式架构需要开发 Taro 标准的 Vue 组件库?Taro 组件库每当有问题需要修复或新功能需要添加,我们需要分别对 React 和 Vue 版本的组件库进行改造。维护成本每当需要支持新的框架,比如 Angular 框架进行开发时,都需要支持开发新框架的标准组件库。能力拓展web端适配-跨框架组件库高拓展性的开发式架构Web Componentsweb端适配-跨框架组件库高拓展性的开发式架构Web ComponentsHTML TemplatesCustom Elemen
4、tsShadom DomES Modules提供灵活、可复用的 HTML 标签模板可以自定义带有特定行为的 HTML 标签对标签内的结构和样式进行一层包装使 Web 组件能够以模块化方式开发定义模板构造 Custom Element使用web端适配-跨框架组件库高拓展性的开发式架构StencilHybridsLitSlim.jsSkateJSPolymerWeb Componentsweb端适配-跨框架组件库高拓展性的开发式架构StencilWeb ComponentsHybridsLitSlim.jsSkateJSPolymer使用组件创建 Stencil Componentweb端适配-跨
5、框架组件库React CompnoentsVue ComponentsVue3 ComponentsRef、Event、Props适配React AdapterVue AdapterVue3 Adapter高拓展性的开发式架构小程序适配VS小程序自创MVVM语法小程序和浏览器环境不一致开发者希望复用海量的Web生态工具开发者熟悉React、Vue等语法模拟实现浏览器环境让 React、Vue、Web 生态库直接运行高拓展性的开发式架构小程序适配-模拟浏览器环境Brower Object Model模拟BOM高拓展性的开发式架构模拟DOMTaro Runtime小程序适配-模拟浏览器环境高拓展性
6、的开发式架构小程序适配-挂载入口、页面构建 DOM 树小程序触发 onLaunchmount(#app,App)ReactDOM.render$mount.页面触发 onShowApp.renderChild(Page)createReactPagecreateVuePage.高拓展性的开发式架构setDataTaro DOM Tree逻辑层小程序适配-渲染方案渲染方案视图层View TemplateText TemplateText TemplateView TemplateText Template高拓展性的开发式架构View TemplateText TemplateTemplates小
7、程序适配-渲染方案根据Taro DOM Tree递归渲染高拓展性的开发式架构View TemplateContainerView TemplateText Template.xmlContainer小程序适配-渲染方案递归模版高拓展性的开发式架构View Template 0Container 0View Template 1View Template 0Container 0.xmlView Template 16Container 16Comp小程序适配-渲染方案非递归模版高拓展性的开发式架构RenderersReact CoreReconcilersMiniRendererhostCon
8、figReact DOM小程序适配-框架兼容精简版渲染器高拓展性的开发式架构Taro Runtime1.调用Taro 虚拟 DOMTaro DOM TreeDOM数的数据结构2.渲染 3.setData4.渲染App Service(逻辑层)View(视图层)Mock BOMFrameworkMock DOMAPItemplatetemplatetemplatetemplateWXML小程序适配-渲染流程renderPart 03编译内核 多编译内核生态 编译构建优化编译内核多编译内核生态Webpack编译内核多编译内核生态编译Webpack方案Metro方案通过Metro编译内核,更贴合Re
9、act Native生态体系编译内核多编译内核生态通过Vite编译内核,提升Web端研发体验编译内核多编译内核生态小程序WebOpenHarmony快应用React Native多编译内核的研发生态编译内核多编译内核生态CLI插件系统编译核心运行环境运行平台Web 端的渲染规范小程序标准的组件库小程序标准的 API 库小程序WebOpenHarmony快应用Webpack/ViteReact NativeMetroReactVuejQuery.开发范式编译内核编译构建优化Webpack编译内核依赖预编译持久化缓存配置工具编译内核编译构建优化-PreBundleScanBundleRemote
10、AppHost App编译内核编译构建优化-PreBundleScanBundleRemote AppHost App使用 ESBuild 收集项目内已使用的 js 模块注意:TS+Vue 语法可能被误判被移除,需设置副作用避免遗漏依赖;需根据 TARO_ENV 等环境变量移除无关依赖。编译内核编译构建优化-PreBundleScanBundleRemote AppHost App使用 ESBuild 打包用户配置和收集的模块,并通过 SWC 优化代码的编译能力,基于 CommonJS 的依赖转换 ESM 后的编译结果进行兼容。注意:多模块使用 ESBuild 输出嵌套路径的难以分析预测,故消
11、除路径中的/将其扁平化输出,并在插件中通过 virtual module 保留原始 path。Scan DenpendeciesESBuildESBuild Bundle Modules(cache)Entry PluginSWC Plugin编译内核编译构建优化-PreBundleScanBundleRemote AppHost AppScan DenpendeciesTaroModuleFederationPlugin(TaroContainerPlugin)Webpack(Module Federation)Bundle ModulesProvidePluginRemote App(Ca
12、che)TaroModuleFederationPlugin(TaroContainerReferencePlugin)MFPlugin ConfigRemote App Assets为Remote应用提供小程序依赖的Taro运行时环境使用MF构建Remote应用为Host应用添加MF配置注入到小程序目录供最终的项目运行使用本地模块(同步)编译内核编译构建优化-PreBundleTaroModuleFederationPlugin(TaroContainerPlugin)ProvidePlugin为Remote应用提供小程序依赖的Taro运行时环境ScanBundleRemote AppHos
13、t AppScan DenpendeciesWebpack(Module Federation)Bundle ModulesRemote App(Cache)TaroModuleFederationPlugin(TaroContainerReferencePlugin)MFPlugin ConfigRemote App Assets使用MF构建Remote应用为Host应用添加MF配置TaroModuleFederationPlugin(TaroContainerPlugin)本地模块(同步)注入到小程序目录供最终的项目运行使用远程模块(异步)-将预编译的依赖修改为远程模块-将特定的引用添加到
14、外部资源的容器-允许从这些容器导入远程模块-注入所需的webpack工具函数Proxy为Remote应用提供静态服务,供Host应用加载时使用编译内核编译构建优化-PreBundle17.53优化前预加载优化前预加载7924使用 NutUI 示例项目测试小程序端Web 端Part 4展望未来 生态融合 总结 后续计划展望未来生态融合Taro Convert使用原生模块小程序跨平台.Taro 全平台Taro Blended原生项目使用 Taroor小程序使用 Web 组件?展望未来生态融合HTML 标签与小程序组件的对应AttributeEvent标签映射属性映射事件映射展望未来生态融合Antd
15、 MobileVant UIWeUI展望未来生态融合DOM API 差异小程序部分 API 不支持同步调用小程序部分组件 API 需要通过 Context 调用节点特性差异不支持在 DOM Tree 之外插入节点(React 的 Portal,Vue3 的 Teleport 都是不支持的)ReactDOM 功能精简(Taro 使用 react-reconciler 自定义调试器)小程序不支持部分样式或CSS选择器(默认宽高并非原图宽高)小程序不支持 svg展望未来总结语法编译系统运行时标准运行平台ReactVuejQuery.Web 端的渲染规范小程序标准的组件库小程序标准的 API 库CLI
16、Taro 插件系统小程序WebOpenHarmony快应用Webpack/ViteReact NativeMetro编译核心小程序React 适配器Vue 适配器模拟 DOM模拟 BOM数据序列化小程序渲染层WebAPI 库路由React NativeReact 适配器Vue 适配器跨框架组件库WebComponentsReact Native 0.69路由库API 库组件库Expo展望未来后续方向鸿蒙适配ViteTest RendererTaro v3.7即将上线展望未来横向发展融合更多的研发生态,框架/平台/工具,为开发者的研发流程提供更多可选项。纵向发展为小程序提供更好的热重载、预渲染等能力,提供适用于更多场景的多端性能优化方案。后续方向感谢开源社区为我们提供了力量THANKS