How to reduce the size of App clip for React native project

I'm trying to add a Clip app to exciting React Native project. But unfortunately the size of it is too big due to dependencies of the main app. I've already added only necessary native dependencies in clip app target in Podfile. However package.json dependencies of the main app are too heavy. Is it possible to setup package.json for clip app to exclude main app dependencies? Ideally choose different package.json files for clip and main targets?

I'm measuring clip app uncompressed size via xcode archive. The size is around 18MB and I see the most of it is main.jsbundle due to main app dependencies:

Answer

18MB is big, most of it seems to be related to the main.jsbundle file.

you can try:

Split package.json for App Clip

App Clip should use a separate package.json, containing only the dependencies that are really needed:

1. Create a new folder (e.g. appclip/) in the project.
2. In that folder, create a new package.json, listing only the packages that are needed.
3. Create a separate entry file like index.appclip.js.
4. Create a separate babel.config.js if needed.

cd appclip
npm init -y
npm install react react-native # install only what you really need

Then, in the App Clip build section:

Generate JS bundle from index.appclip.js instead of index.js.

react-native bundle \
  --platform ios \
  --entry-file appclip/index.appclip.js \
  --bundle-output ios/appclip/main.jsbundle \
  --assets-dest ios/appclip

Optimize App Clip content

Don't import all modules from the main app.

Limit the use of big libraries (like moment.js, lodash, react-navigation,...) in Clip.

Use require() dynamically to avoid loading unnecessary parts.

Clean up JS bundle

Try using tree-shaking tools, minify bundle:

react-native bundle --minify true ...

Check if main.jsbundle contains parts that are not needed for Clip.

Check your Xcode configuration In the Build Settings section, check to see if there are any unnecessary shared settings between the main app and the App Clip target (like include debug symbols, strip symbols, etc.).

Make sure the App Clip builds using the Release configuration for optimization.

Reduce static assets

Remove unnecessary images/audio from the Clip bundle.

Check if the assets/ folder is included in the App Clip.