Optimizing React Native Bundle Size with the CRN Bundle Analysis Platform

In the process of business iteration and release, redundant code often leads to oversized bundles that affect performance and user experience. This article analyzes React Native bundles at the JavaScript level and introduces the CRN (Ctrip React Native) bundle analysis platform for size trimming during later development stages.

Current Situation : Few tools exist for React Native performance tuning. The article introduces the react-native-bundle-visualizer , which uses source-map-explorer to visualize Metro bundler output.

Installation command:

yarn add --dev react-native-bundle-visualizer && yarn run react-native-bundle-visualizer

If no output appears, manually specify the entry file, e.g., --entry-file ./index.android.js , which includes both node_modules and source files.

Why develop the CRN bundle analysis platform? Existing tools are local-only, require manual re‑generation after each change, and cannot handle Ctrip’s customized React Native framework. The online platform offers real‑time analysis, historical size heatmaps, and size‑inflation alerts.

Platform advantages:

Facilitates React Native performance tuning

Reduces app size and improves overall performance

Provides online visual analysis

Issues size‑inflation warnings

Supports customized Ctrip React Native bundler results

Platform Features :

Bundle overview with total and compressed sizes

Size details displayed as a tree‑structured chart

Module dependency graph for deep dependency inspection

File diff comparison between two jobs, linked to GitLab changes

Package‑level size statistics with historical heatmaps

Implementation : The platform processes JOB data, calls backend APIs to fetch bundle files and source‑map files, queues them for analysis, and uses Node.js to generate a JSON data package. The frontend, built with Vue.js, Element‑UI, and D3.js, visualizes the data with treemaps, heatmaps, bar charts, and dependency graphs.

Optimization Strategies :

Replace heavy libraries (e.g., moment → dayjs , lodash → specific imports or native code).

Configure Babel plugin babel-plugin-transform-imports to prevent full library imports:

"plugins": [
  ["transform-imports", {
    "lodash": {
      "transform": "lodash/${member}",
      "preventFullImport": true
    }
  }]
]

Use ESLint rule no-restricted-imports to block whole‑library imports:

"no-restricted-imports": [
  "error",
  { "paths": ["lodash"] }
]

Implement native equivalents, e.g., a debounce function:

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    }, wait);
    if (immediate && !timeout) func.apply(context, args);
  };
}

Apply code splitting via lazy loading:

let page = lazyRequire('./src/Page.js');
const pages = [{ component: page, name: 'page', isInitialPage: true }];

Or classic require‑based lazy loading:

import React, { Component } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
let VeryExpensive = null;
export default class Optimized extends Component {
  state = { needsExpensive: false };
  didPress = () => {
    if (VeryExpensive == null) {
      VeryExpensive = require('./VeryExpensive').default;
    }
    this.setState(() => ({ needsExpensive: true }));
  };
  render() {
    return (
Load
{this.state.needsExpensive ?
: null}
);
  }
}

Static asset optimization includes replacing large base64 images with PNG/JPEG, compressing images, and trimming dimensions.

After applying these optimizations, the bundle size was reduced by approximately 50%.

Conclusion : Systematic bundle analysis and targeted optimizations—library replacement, import reduction, code splitting, and static asset handling—significantly shrink React Native bundles, improve performance, and maintain a sustainable development workflow.

Team Recruitment : The Ctrip flight ticket R&D team is hiring front‑end, back‑end, data, and testing engineers. Interested candidates can email [email protected] with the subject format “Name – Ctrip Flight – Position”.