Mpx: An Enhanced Mini‑Program Framework for Better Development Experience and Performance

Mpx is an enhanced mini‑program framework designed to improve the development experience of small‑programs by bringing modern web development tools (Vue + Webpack) to the mini‑program ecosystem. It offers a rich set of features such as data‑response (watch/computed), advanced template syntax, deep performance optimizations, Webpack‑based compilation, single‑file components, Vuex‑style state management, package‑based team collaboration, mixins for logic reuse, scaffolding support, full compliance with mini‑program specifications, and even support for Alipay mini‑programs.

Design Rationale

Unlike mainstream translation‑based frameworks like WePY, mpvue, and Taro, which convert other syntax into mini‑program code, Mpx is an enhancement‑type framework built directly on the mini‑program syntax. This approach avoids the limitations of translation frameworks (incomplete feature support and unpredictable errors) and allows immediate adoption of new mini‑program specifications without extra translation overhead.

Technical Implementation

Early mini‑programs lacked custom components, so frameworks such as WePY and mpvue used compile‑time component wrapping, which caused performance issues because page‑level setData updates were triggered for every component change. After custom components were introduced, Mpx leveraged their ability to perform component‑level updates, resulting in significant performance gains.

The framework introduces a data‑response system based on MobX and mixins, creating a reactive store that watches component data (data/props/computed) and drives view updates via setData . A Vuex‑compatible store with multi‑instance merging supports cross‑team development.

To optimize setData , Mpx reduces call frequency and payload size by:

Compiling static templates into render functions that collect data dependencies; only when dependencies change does setData fire, and an async queue ensures at most one setData per tick.

Recording data paths during render compilation, diffing current and previous values, and sending only changed data via path‑based setData , dramatically cutting both call frequency and transmitted data volume.

Compilation & Build

Mpx adopts Webpack for compilation to provide a powerful engineering experience. Because mini‑program files are highly fragmented, Mpx uses dependency analysis and dynamic entry addition: a single entry (app.mpx) is declared, and the loader parses JSON pages and usingComponents fields to add required .mpx files as separate entries. This process recurses until all used files are included. CommonsChunkPlugin/SplitChunksPlugin extract shared modules, preventing duplicate bundles. A dedicated Webpack plugin and loader enable seamless packaging of mini‑programs without extra steps.

Current Status & Future

Mpx is extensively used within Didi’s internal products (Didi Ride, Qingju Bike, etc.) and has received positive feedback for stability and performance. Future work includes keeping up with the latest WeChat and Alipay specifications, expanding platform support, and exploring cross‑platform (H5/Native) possibilities while maintaining the core focus on enhancing mini‑program development.

Conclusion

For developers who prioritize development experience and product performance in mini‑programs, Mpx offers a compelling solution. The project is open‑source and continuously maintained.

GitHub: github.com/didi/mpx

Documentation: didi.github.io/mpx/