Optimize package size

[CantoneseCat]

Replacing @solana/wallet-adapter-walletconnect with @walletconnect/solana-adapter@0.0.1-beta.0 adds around 1.5 mb to my bundle. (before compression)

That is way too much for a wallet connector, especially since vite/rollup now struggles with separating imports, the size of my bundles main .js file has doubled!

[glitch-txs]

Aware, we will address this, ATM this JS is dynamically imported.

[linear[bot]]

APKT-728 Optimize package size

[mlenser]

@web3modal/base and @web3modal/scaffold-ui are added to the bundle. At a minimum that's 141 kB + 193 kB added to the bundle. 334 kB.

I tried replacing rainbowkit with @web3modal/wagmi (replacing no other dependencies) and ended up with 252 kB more in our base bundle. That's a non-starter.

Are there any plans to address this?

[glitch-txs]

How are you measuring this? @mlenser

RainbowKit is bigger but can fool some tools because of dynamic importing on page load.

We have a lot of features in AppKit, you can try by disabling what you won't be using. We will release v6 soon and a lot of these should be addressed.

[mlenser]

The first images are bundlephobia. The 252 kB is from a bundle analysis script on every PR. I've also checked it with https://www.npmjs.com/package/@next/bundle-analyzer. It's accurate.

The web3modal libs combined are 334 kB. Rainbowkit is around 62 kB : https://bundlephobia.com/package/@rainbow-me/rainbowkit@2.1.5 The difference between 334 and 62 is close to the difference by the bundle analysis script.

[glitch-txs]

The analysis on Web3Modal is accurate but the one in RainbowKit is not, bundlefophia is pretty bad for this context and doesn't give you the full bundle size of RainbowKit.

Web3Modal is not 200kb though it's like 700kb, RainbowKit is around the same size.

We are using this, would love your input https://medium.com/@glitch.txs/on-measuring-the-bundle-size-of-javascript-packages-5816e216e3d8

[mlenser]

The sizes mentioned above are gzipped sizes which is what nextjs and other tools use as a comparison.

---

I've created a repo which shows the bundle size comparisons.

• Base branch with wagmi, viem, and react-query is 92.3 kB on the First Load JS
• Rainbowkit is 266 kB on the First Load JS
• web3modal is 494 kB on the First Load JS.

Both apps use a custom connect button. web3modal seemed to bloat once using the connect button. Without it, the bundle size is not bloated. All 3 branches of that repo can be built locally with next build to see the bundle size which I copied to the README.md for documentation.

vite-size is probably a great tool. I'm not sure what numbers you're seeing, but the above numbers are actual bundle sizes with nextjs. Your numbers are probably without the bloat from a custom button?

Conclusions based on the actual nextjs numbers:

• rainbowkit with a custom button is adding ~174 kB to the bundle
• web3modal with a custom button is adding ~402 kB to the bundle

[glitch-txs]

Vite let's you visualize the split code but it gives you the full bundle size (it doesn't filter dynamic imported files). Next will only show the first load (First Load JS), if you look at the network console you will see after the first load there are a lot of js files loaded. Bundlephobia will also ignore this.

Anyways, dynamic importing is good practice when necessary and I do agree that AppKit right now is HUGE. v6 should reduce this drastically and we'll keep working on improving this.

[mlenser]

Thank you for looking into this.

Rainbow definitely could be loading things after the initial load. That first initial load is the most important so deferring some of the UI on web3modal via dynamic imports may be something to consider as you're saying.

I look forward to v6. Do you guys have any blogs on it or some general release timeframe?

[glitch-txs]

you can follow the PR here: https://github.com/WalletConnect/web3modal/pull/2766