Qreact: A Mini React Framework for Mobile Front‑End Optimization

Qreact is a mini‑React framework built by Ctrip’s front‑end team to address the strict bundle‑size limits of their mobile applications, especially for React Native and React Web projects where updates must stay under 100 MB.

The core requirements were threefold: a tiny footprint, a full‑featured synthetic event system compatible with React, and seamless drop‑in replacement for existing React codebases.

After evaluating alternatives such as Inferno, Preact, and React‑lite, the team initially tried React‑lite but encountered limitations in event handling and internal APIs, prompting a switch to Preact.

Using Preact’s options.js ( https://github.com/developit/preact/blob/master/src/options.js ), they overridden key methods to add a fourth event‑handler argument, expose internal properties like _rootNodeID , and shrink the event system from ~16 000 lines to ~4 000 lines, achieving a minified size of 39 KB (down from React’s 140 KB).

Further performance tricks included reducing virtual‑DOM diff work via hydration (merging adjacent text nodes), recycling DOM nodes, and static‑tree caching based on JSX analysis, which together compensated for any loss in diff efficiency.

The final Qreact bundle is about 6 000 lines of code, passes the company’s strict size criteria, and demonstrates comparable performance in ListView tests, with demo projects such as yo‑demo and qunar‑react‑native‑web showcased.

Additional resources and related articles on Ctrip’s cloud practices, Apollo configuration center, and deep‑learning recommendation systems are provided for further reading.