Docs
API
Blog
Version
Docs
API
Blog
Version: v5

Bundle analysis

Bundle analysis is a crucial process that helps you understand your app's performance bottlenecks and identify opportunities for optimization. By analyzing your bundle, you can gain insights into bundle size and composition, module dependencies, duplicate modules, and compilation time. We recommend using Rsdoctor for bundle analysis, though you can also check our alternative tools section for other options.

Rsdoctor

Rsdoctor provides comprehensive visualization of the build process, offering detailed insights into compilation time, compilation transformations, module dependencies, duplicate modules, and bundle size analysis.

Installation

Rspack
webpack
npm
yarn
pnpm
bun
npm install @rsdoctor/rspack-plugin -D

Usage

Only for development

Please do not use Rsdoctor in production version.

The process.env.RSDOCTOR is used to conditionally enable the plugin just for the development environment.

Initialize the plugin in your bundler configuration:

Rspack
webpack
rspack.config.mjs
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

export default {
  // ...
  plugins: [
    process.env.RSDOCTOR &&
      new RsdoctorRspackPlugin({
        // plugin options
      }),
  ],
};

Use the RSDOCTOR environment variable when running the build:

RSDOCTOR=true npx react-native bundle
Specific platform analysis

For better analysis results, it's recommended to run a single platform build using the --platform option:

RSDOCTOR=true npx react-native bundle --platform <platform>

This helps to get more focused and accurate bundle analysis for each platform.

After running the above commands, when the build is completed, it will open the build analysis page. For complete features, please refer to Rsdoctor documentation.

Options

The RsdoctorPlugin plugin provides several options to customize the build analysis. Read more about it here.

Alternative tools

  • Sonda - Universal visualizer and analyzer for JavaScript and CSS. Compatible with Re.Pack.
  • Webpack Bundle Analyzer - A tool for analyzing the bundle size of your React Native application.
  • source-map-explorer - A tool for analyzing the bundle size of your React Native application.