Skip to content

bundle-analysis.mdx

Latest commit

 

History

History
103 lines (78 loc) · 3.54 KB

bundle-analysis.mdx

File metadata and controls

103 lines (78 loc) · 3.54 KB

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

import { PackageManagerTabs, Tabs, Tab } from '@theme';

Usage

:::danger 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:

```ts title=rspack.config.mjs import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin'; 
export default {
  // ...
  plugins: [
    process.env.RSDOCTOR &&
      new RsdoctorRspackPlugin({
        // plugin options
      }),
  ],
};
```
```ts title=webpack.config.js import { RsdoctorWebpackPlugin } from '@rsdoctor/webpack-plugin'; 
export default {
  // ...
  plugins: [
    process.env.RSDOCTOR &&
      new RsdoctorWebpackPlugin({
        // plugin options
      }),
  ],
};
```

Use the RSDOCTOR environment variable when running the build:

RSDOCTOR=true npx react-native bundle

:::tip 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.