CRN Framework: Optimizing React Native Performance and Stability at Ctrip

Author Background

Zhao Xinguo, Development Director of Ctrip Wireless Platform R&D, joined Ctrip in 2013 and focuses on React Native promotion, wireless framework, and engineering architecture upgrades.

1. RN Usage at Ctrip

Since React Native was open‑sourced in 2015, Ctrip started a pre‑research in June 2016 and officially launched RN in August 2016. By September 2018, 104 RN bundles were in production, 83 of which run in the Ctrip Travel App, achieving a PV growth of 300% year‑over‑year and nearly double the PV of traditional H5/Hybrid solutions.

2. CRN Framework

CRN is a customized cross‑platform development framework built on top of React Native, providing full‑lifecycle support for development, release, and operations.

2.1 Development Framework

Provides CLI tools, documentation, component libraries, cross‑platform APIs, and code hosting. The CLI (crn‑cli) offers commands such as init, start, run‑ios, run‑android, run‑patch, cli‑update, example, and aux for logging, packaging, and uploading.

2.2 Components and Solutions

More than 100 business and common components are provided with a unified API across platforms.

3. CRN Performance Optimizations

3.1 Framework Loading Optimizations

The RN bundle is split into three parts: global variable definitions, module definitions, and engine initialization. CRN separates framework code from business code, allowing the framework bundle (rn_common) to be pre‑loaded in a background thread while business bundles load on demand.

Instance lifecycle states (Loading, Ready, Dirty, Error) enable caching of ready instances; 95% of sessions reuse a pre‑created instance, reducing framework load time to near zero for most users.

3.2 Business Code Loading Optimizations

Two main strategies:

On‑Demand Loading : Uses lazyRequire to defer module execution until the page is actually needed.

Pre‑Loading : Loads business bundles in the background before the user navigates to them.

Implementation examples:

import PageA from "pages/PageA";
import PageB from "pages/PageB";
let pageList = [PageA, PageB];
App.startApp(pageList);

converted to lazy loading:

const PageA = lazyRequire("pages/PageA");
const PageB = lazyRequire("pages/PageB");
let pageList = [PageA, PageB];
App.startApp(pageList);

Additional techniques include getter‑based module exports and inlineRequire patterns to avoid eager execution.

3.3 Business Code Pre‑Loading

Business bundles can be pre‑loaded and cached using a global LRU array; each pre‑loaded bundle adds ~2 MB memory on Android, while a full page consumes ~20 MB (mostly images).

3.4 Page Rendering Optimizations

Progressive rendering renders the header first and defers the rest with setTimeout. Skeleton screens are rendered instantly and replaced with real data once loaded.

4. Release and Operations

4.1 Release System

Supports version/platform/environment releases, gray releases, rollbacks, and provides real‑time delivery rate dashboards.

4.2 Performance Reporting

Collects first‑screen load times, filters by app/version/platform, and defines precise render completion points in native code (e.g., dispatchDraw on Android, insertReactSubview:atIndex: on iOS).

4.3 Error Reporting

Aggregates RN JavaScript and native runtime errors, links them to bundle versions, and displays detailed stack traces for debugging.

5. Practical Experiences

5.1 Version Upgrades

Ctrip upgraded RN from 0.28 to 0.30, 0.41, and 0.51 over several years, with each major upgrade taking 2‑3 weeks of framework work and about one week of business testing.

5.2 Third‑Party Component Version Management

Enforces fixed versions for npm dependencies to avoid incompatibility; a pre‑build check aborts builds when non‑pinned versions are detected.

5.3 Platform‑Specific Packaging

Separate iOS and Android bundles using a js‑diff directory; Android loads platform‑specific modules first, falling back to common modules.

5.4 Stability Optimizations

iOS: Register custom fatal error handlers via RCTSetFatalHandler and monitor RCTFatal. Android: Guard LoadLibrary calls, handle DefaultNativeModuleCallExceptionHandler, and upgrade JavaScriptCore to a newer build to reduce crashes.

6. Summary

The CRN framework introduces extensive low‑level modifications to React Native, achieving native‑level performance and stability while significantly lowering development cost, and has been widely adopted across Ctrip’s mobile products.