[Docs] Add reducing bundle size guide

krystofwoldrich commented 2 months ago

Description

After https://github.com/getsentry/sentry-react-native/pull/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 commented 1 month ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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 !

freeboub commented 2 weeks ago

@krystofwoldrich Just to keep you updated. I don't reproduce the issue in a project created from scratch. I think it deals with our mono repo integration (a web version vs a react native version with different sentry sdk integration). I found a workaround by adding manually duplicated package in the sub repository:

    "@sentry/core": "^8.36.0",
    "@sentry/react-native": "^6.1.0",
    "@sentry/types": "^8.36.0",
    "@sentry/utils": "^8.36.0",

No ideal but it works! Thank you

krystofwoldrich commented 1 week ago

@freeboub Thank you for the update.

getsentry / sentry-react-native

[Docs] Add reducing bundle size guide #4070

Description