React native bundle size

[nthtrung09it]

I used rsdoctor to check my React Native bundle size and found that PowerSync is one of the main culprits increasing the bundle size:

Do you guy have any tips?

[Chriztiaan]

Hey @nthtrung09it, does the tool allow you to see the contents of your @powersync bundle? And where specifically the total size is coming from specifically for PS?

[nthtrung09it]

Hey @Chriztiaan, here it is:

[nthtrung09it]

@Chriztiaan how is it going?

[Chriztiaan]

Hey @nthtrung09it, I looked at this earlier. Naturally there is always room for improvement, but a possible culprit is the packages that we pre-bundle to streamline the React-Native setup which normally wouldn't be directly attributed to the PowerSync package. In the short term I don't see big improvements we aim to release on this just yet.

For a mobile app this feels negligible, do you anticipate an issue with this?

[nthtrung09it]

@Chriztiaan Sorry for late reply. I think big bundle size will affect the cold start time of my react native app. powersync-js is the primary feature so it need to load immediately in my case.

Can you tell me where I can look into?

[stevensJourney]

It would be interesting to see what the actual performance impact would be for a smaller bundle size. From a quick scan I noticed we currently don't have the Rollup terser plugin enabled for both @powersync/common and @powersync/react-native. Enabling that plugin does significantly decrease the filesize of bundled JS - moving most of that overhead to the sourcemaps.

With terser

❯ du -sh packages/common/dist/*
208K    packages/common/dist/bundle.cjs
824K    packages/common/dist/bundle.cjs.map
208K    packages/common/dist/bundle.mjs
824K    packages/common/dist/bundle.mjs.map
160K    packages/common/dist/bundle.node.cjs
628K    packages/common/dist/bundle.node.cjs.map
156K    packages/common/dist/bundle.node.mjs
628K    packages/common/dist/bundle.node.mjs.map
140K    packages/common/dist/index.d.cts
❯ du -sh packages/react-native/dist/*
1.2M    packages/react-native/dist/index.js
3.5M    packages/react-native/dist/index.js.map

Without terser

❯ du -sh packages/common/dist/*
576K    packages/common/dist/bundle.cjs
1.0M    packages/common/dist/bundle.cjs.map
576K    packages/common/dist/bundle.mjs
1.0M    packages/common/dist/bundle.mjs.map
432K    packages/common/dist/bundle.node.cjs
764K    packages/common/dist/bundle.node.cjs.map
428K    packages/common/dist/bundle.node.mjs
764K    packages/common/dist/bundle.node.mjs.map
140K    packages/common/dist/index.d.cts
❯ du -sh packages/react-native/dist/*
2.5M    packages/react-native/dist/index.js
4.5M    packages/react-native/dist/index.js.map

That being said, I imagine any size optimisations made from us using terser internally, could also be done by consumers by minifying their apps' bundled code.