滴滴开源小程序框架Mpx

Mpx是一款致力于提高小程序开发体验的增强型小程序框架，通过Mpx，我们能够以最先进的web开发体验（Vue + Webpack）来开发生产性能深度优化的小程序，Mpx具有以下一些优秀特性：

数据响应特性（观看/计算的）增强的模板语法（动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等）深度性能优化（原生自定义组件/基于依赖收集和数据变化的使用setData）的WebPack编译（NPM /循环依赖/巴别/ESLint/CSS预编译/代码优化等）单文件组件开发状态管理（Vuex规范/多实例/可合并）跨团队合作（包）逻辑复用能力（ mixins）脚手架支持小程序自身规范的完全支持支付宝小程序的支持

设计思路

目前业界主流的小程序框架主要有WePY，沈阳微信小程序

XX mpvue和Taro都将其他语法规范翻译成小程序语法规范，我们将其称为翻译框架。与上述三者不同，Mpx是基于小程序语法规范的增强型框架。我们使用Vue的优秀语法功能来增强小程序，而不是让用户直接使用vue语法来开发小程序。它基于以下注意事项：转换框架不支持源框架的所有语法功能（例如Vue模板中的动态功能或React中动态生成的jsx），并且用户使用源框架语法进行开发时可能会遇到意外错误。具有不确定性小程序本身的技术规范不断更新。许多新的技术规范在翻译框架中不能得到支持或需要很高的支持成本。对于增强型框架，只要新技术规范没有增强功能冲突，就可以直接支持

技术实现

小程序在启动时不支持自定义组件，并且无法组件化。 WePY和mpvue做了一系列工作来支持这一关键功能，大大提高了用户的开发体验和效率。 WePY和mpvue的组件支持是基于编译的基于组件的封装。用户编写的组件模板将编译为Page中模板的一部分。组件中定义的数据将被编译到页面中的数据中，数据将在组件上进行编译。此更新还基于路径映射调用Page.setData。这在当时的技术条件下是一个很好的技术解决方案，但是该解决方案在复杂的小程序应用程序中存在性能问题，因为解决方案中页面中的数据量会很大，并且每个组件的部分更新实际上都是在页面级别成为全局更新，导致具有更多组件的页面中的显着性能开销。

在引入小程序自定义组件之后，我们通过性能测试确认了小程序自定义组件支持组件级本地更新，该更新具有良好的更新性能。由于自定义组件是当时最新的技术标准，因此不支持业界的小程序框架，并且我们在业务中有复杂的小程序开发要求，因此我们基于小程序自定义组件汇海设计并开发了Mpx框架。

页面和组件setData性能比较

ComponentPage部分更新