Open CantoneseCat opened 1 month ago
Aware, we will address this, ATM this JS is dynamically imported.
@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?
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.
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.
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
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.
92.3 kB
on the First Load JS266 kB
on the First Load JS494 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 bundleweb3modal
with a custom button is adding ~402 kB
to the bundleVite 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.
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?
you can follow the PR here: https://github.com/WalletConnect/web3modal/pull/2766
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!