滴滴出行 Mpx2DRN落地实践-薛干.pdf

《滴滴出行 Mpx2DRN落地实践-薛干.pdf》由会员分享，可在线阅读，更多相关《滴滴出行 Mpx2DRN落地实践-薛干.pdf（32页珍藏版）》请在三个皮匠报告上搜索。

1、2026.03.21阿 巴巴 全球总部 _访客中中国杭州 HANGZHOU CHINA滴滴出Mpx2DRN 跨端落地实践主会场演讲嘉宾薛（滴滴出）约泛前端-专家程师 滴滴跨端背景介绍1 技术选型与实现原理2 跨端性能优化3 业务落地路径与收益4 跨端+AI 结合探索5 滴滴跨端背景介绍1多流量并进复杂的业务现状全态平台覆盖约业务微信程序付宝程序滴滴出程序iOSAndroid滴滴出AppHarmonyWebapp招商银等业务核诉求与挑战业务诉求现实约束迭代节奏快多端同步迭代性能体验优能够套代码，多端、多程序平台以及Web平台运次开发、多端运体验与性能切换成本低如何破解？基于现状架构痛点，我们需要

2、探索贴合业务诉求的跨端架构案，同时这个案需要符合以下三个标准跨端输出原与程序都需要较的性能需要在不幅增加研发成本的前提下，快速实现业务切换跨端框架 技术选型与实现原理2Mpx 框架简介Mpx 是滴滴开源的增强型跨端程序框架，具有良好的开发体验，极致的应性能，完整的原兼容等特点，持份源码跨端输出所有程序平台及Web。不同于业内主流将 React/Vue 直接跑在程序中的案，Mpx 基于程序原能做“增强”。通过编译+运时扩展与 Vue 语法设计，带来接近 Vue 的开发体验，并在性能与体积上可控。跨端技术选型从跨端致性、程序持度、性能体验、迁移成本等纬度考量Mpx2DRNRNFlutteruni-

3、apptaro迁移成本程序持度跨全端致性性能体验低不持低(taro RNuni-app x)较好较好较好Mpx2DRN 跨端整体架构 跨端性能优化3体积优化加载优化渲染优化产物体积优化框架体积优化与公共模块抽离 加载优化-业务分包为什么要进分包？业务众多，单个Bundle体积过导致包加载慢，影响屏加载 期望仅加载当前进业务的代码，关键路径延迟加载 加载优化-业务分包框架基于Webpack代码分割 与Suspense机制 编译识别分包配置成 运时复写Webpack加载逻辑 代理DRN宿主动态加载与程序分包语法致，拉多端开发体验 实现业务感的性能优化加载优化-按需注能核策略：通过“编译时闭包封装+

4、运时按需加载”实现机制：全量 Getter 化：组件依赖编译为惰性函数，启动时仅注册，不执。精准实例化：仅当视图渲染命中组件节点时，才触发代码执。该机制对标程序的 lazyCodeLoading 特性，确保了未被渲染的/组件零开销，显著降低了 DRN 应的启动耗时和内存占。收益：复杂项屏JS加载耗时优化约80%渲染优化-组件渲染优化基础组件对每个组件仔细地权衡了功能与性能的取舍，进了量的按需设计与memo优化，业务可按需进能增强；基于 Reanimated+Gesture Handler 实现 scroll-view、swiper 等复杂势交互组件。渲染优化-视图更新机制在 RN 环境下实现与

5、 Vue 致的基于数据响应和模版数据依赖收集的组件局部更新，内置 memo、useMemo 的精确更新，视图更新效率要显著于未经优化的原始 RN 代码 业务落地路径与收益4业务落地-态持业务落地-渐进迁移业务落地-收益程序iOSAndroid跨端+AI结合探索5AI 结合探索 开发者痛点：转换代码的适配与兼容作 代码转换时跨端兼容问题的识别与排查困难 我们期望使 AI+跨端：AI 模型可以对存量代码进跨端适配改造 AI 可以解答开发同学跨端适配与兼容问题 AI 可以提供跨端开发最佳实践 AI 结合探索 当前 AI 在众训练数据领域的个较典型的问题是 AI 幻觉问题 模型并不理解 Mpx 代码，以及如何对我们的 存量代码进转换。经过对解决幻觉问题相关案的调研：1.通过”AI+规则 RAG+AST 校验的组合，让模型对存量代码进跨端适配，开发者做次校准与验证 2.针对众领域数据稀缺导致的幻觉问题，引检索增强（RAG）与显式规则库，最限度约束模型输出并提升致性 AI 智能客服开源Mpx MCP Server 搭建Mpx RAG 知识库AI 跨端代码成AI 跨端开发 IDE+MCP Server 演示THANKS