Optimize package size

[CantoneseCat]

Replacing @solana/wallet-adapter-walletconnect with @walletconnect/[email protected] 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]

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/[email protected]
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:
#2766

[mlenser]

I tried the latest @reown/appkit version via https://docs.reown.com/appkit/next/core/installation while using next/dynamic for the button itself.

It added ~340kB to my layout file and that's after replacing rainbowkit (~60kB).

If I compare prod vs appkit builds the layout is not listed and everything seems slightly better overall

Prod	Appkit

I compared the bundle itself:

Prod	Appkit

The total chunk size is 5.56MB on prod and 4.84 MB with Appkit (parsed, not gzipped sizes in this case). However, the largest chunk for Appkit is 362 KB (1.42MB not gzipped), which dwarfs any previous chunks. That chunk is definitely getting to the users and would impact them aversely.

Some issues with the appkit bundle:

• UI is 76KB + 58KB.

• Possibly split the massive universal-provider?
  
• bn.js is 11KB which should only be used for ethers, not wagmi/viem versions. @reown/appkit-adapter-wagmi is another 42KB on top of the base bundle so it's doubling up a bit here.

What it really boils down to is createAppKit and WagmiAdapter should be isolated on their own. WagmiAdapter is already is on its own (via @reown/appkit-adapter-wagmi). createAppKit should be on its own with a very minimal bundle size. Then when we lazy load the button the impact of the size of the UI chunks should be minimal.

[oed]

Quick notes on reducing bundle size:

Use native javascript bigInt

npm list bignumber.js
└─┬ @reown/[email protected] extraneous
  └── [email protected] deduped
  
npm list bn.js       
└─┬ @reown/[email protected] extraneous
  ├─┬ @wagmi/[email protected]
  │ └─┬ cbw-sdk@npm:@coinbase/[email protected]
  │   └── [email protected]
  └─┬ @walletconnect/[email protected] extraneous
    └─┬ [email protected]
      └── [email protected]

Use noble crypto instead of elliptic and @stablelib/* (partial PR exists: WalletConnect/walletconnect-monorepo#5333)

npm list elliptic
├─┬ @reown/[email protected] extraneous
│ ├─┬ @wagmi/[email protected]
│ │ ├─┬ @metamask/[email protected]
│ │ │ └─┬ [email protected]
│ │ │   └─┬ [email protected]
│ │ │     └── [email protected] deduped
│ │ └─┬ @walletconnect/[email protected]
│ │   └─┬ @walletconnect/[email protected]
│ │     └── [email protected] deduped
│ └─┬ @walletconnect/[email protected] extraneous
│   └── [email protected]
├─┬ @reown/[email protected] extraneous
│ └─┬ @walletconnect/[email protected] extraneous
│   └── [email protected] deduped
├─┬ @reown/[email protected] extraneous
│ └─┬ @walletconnect/[email protected] extraneous
│   └── [email protected] deduped
├─┬ @reown/[email protected] extraneous
│ └─┬ @walletconnect/[email protected] extraneous
│   └── [email protected] deduped
└─┬ @reown/[email protected] extraneous
  └─┬ @walletconnect/[email protected] extraneous
    └── [email protected] deduped

npm list @stablelib/x25519
├─┬ @reown/[email protected] extraneous
│ ├─┬ @wagmi/[email protected]
│ │ └─┬ @walletconnect/[email protected]
│ │   └─┬ @walletconnect/[email protected]
│ │     └── @stablelib/[email protected] deduped
│ └─┬ @walletconnect/[email protected] extraneous
│   └── @stablelib/[email protected]
├─┬ @reown/[email protected] extraneous
│ └─┬ @walletconnect/[email protected] extraneous
│   └── @stablelib/[email protected] deduped
├─┬ @reown/[email protected] extraneous
│ └─┬ @walletconnect/[email protected] extraneous
│   └── @stablelib/[email protected] deduped
├─┬ @reown/[email protected] extraneous
│ └─┬ @walletconnect/[email protected] extraneous
│   └── @stablelib/[email protected] deduped
└─┬ @reown/[email protected] extraneous
  └─┬ @walletconnect/[email protected] extraneous
    └── @stablelib/[email protected] deduped

[reslear]

also the problem of splitting into a large number of packages

vite vue vendor chunk:

'reown-appkit': [
  // hidden deps
  '@reown/appkit-common',
  '@reown/appkit-polyfills',
  '@reown/appkit-scaffold-ui',
  '@reown/appkit-siwe',
  '@reown/appkit-ui',
  '@reown/appkit-utils',
  '@reown/appkit-wallet',

  // real
  '@reown/appkit',
  '@reown/appkit-adapter-wagmi',
],