[Docs] Add reducing bundle size guide

[krystofwoldrich]

Description

After #4006 is merged we need to add new guide to React Native docs about how to reduce the bundle size of the Sentry RN SDK.

[freeboub]

Hello,

Not sure this it the good place to ask, but I have just run bundle visualize and I see a lot of duplicate JS package in my app.
I have just some very quick investigation, I can go more into details.

[krystofwoldrich]

Hi @freeboub, thank you for the message, this definitely looks suspicious.

Do you see similar issue with other packages? The common dependencies should be deduplicated during the bundling process.

---

Could you share more details about your setup?

What package manager are you using, have you changed how node_modules are created in the package manager settings, how does your metro.config looks like?

[freeboub]

Hello @krystofwoldrich,
I didn't investigate more, butI have found an easy workaround.
I am just importing the duplicated dependencies in my root repository and it fixes the issue.
Not critical as it is just 3 lines, but it can be source of errors.

I will try to reproduce it on a sample, but to give a start of answer:

• I don't see anything similar with other packages, but I don't think we have deps with similar cross dependencies.
• we use yarn v3.
• our project to a monorepo project
• here is metro.config.js:

/**
 * Metro configuration for React Native
 * https://reactnative.dev/docs/metro
 *
 * @format
 */
const path = require('path');
const { mergeConfig } = require('@react-native/metro-config');

const { getSentryExpoConfig } = require('@sentry/react-native/metro');
const {
  getMetroAndroidAssetsResolutionFix,
} = require('react-native-monorepo-tools');

const androidAssetsResolutionFix = getMetroAndroidAssetsResolutionFix();

module.exports = mergeConfig(getSentryExpoConfig(__dirname), {
  transformer: {
    publicPath: androidAssetsResolutionFix.publicPath,
    assetPlugins: ['expo-asset/tools/hashAssetFiles'],
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  server: {
    // ...and to the server middleware.
    enhanceMiddleware: middleware => {
      return androidAssetsResolutionFix.applyMiddleware(middleware);
    },
  },
  watchFolders: [path.resolve(__dirname, '../../')],
});

I will try to reproduce on a fresh project and open a dedicated ticket !