Importing all wallets into final build and increasing the build size.

[codesart-4]

Hello,

So, in code while doing this import, it should only import these three wallets. But yarn analysing final build is showing blocto wallet, torus wallet and all others and increasing the app size a lot. Is there any way to reduct the final build size of apps using this wallet adapter?

import {
  getPhantomWallet,
  getSolflareWallet,
  getSolletWallet,
} from "@solana/wallet-adapter-wallets";

[jordaaash]

Can you say more about your project environment and build setup? If your transpiler is set up for tree shaking, this shouldn't happen.

[codesart-4]

I'm new to react or js. So, can't answer that. Basically I cloned this repo and did

yarn install
yarn build

Then the build size in 13MB. I added GENERATE_SOURCEMAP=false in build scripts to remove source map to reduce the size to 3MB.
Then I followed this to analyse the build. Attached analyse screenshot.

Do you suggest I need to do yarn eject to configure those things as mentioned in that repo? Any doc or blogpost how I can set tree shaking for this kinda project to get going?

[jordaaash]

Thanks for the additional detail, I'll look into this.

[jordaaash]

This is fixed by 6d9c3a7 and has been published as a minor (breaking change) release to the affected packages.

The change that broke tree shaking was for #4 but I think the starter projects provide reasonable ways to get transpiling of modules working now.

[codesart-4]

Thanks will try. Dunno why github not giving mails/notifs.

[codesart-4]

Hello @jordansexton, I've removed node modules, changed the version of this package to 0.10.0 in package.json of the repo I've used. But still build consists all these wallets. Am I doing this right?

[jordaaash]

Can you mention more about what your project structure / build toolchain looks like? The build now exports esnext modules, so tree shaking should work out of the box for most build systems.

[codesart-4]

I've cloning this repo - https://github.com/exiled-apes/candy-machine-mint, changing version of wallet adapter from 0.9.0 to 0.10.0 and then doing

yarn install
yarn build

And then doing yarn analyze as mentioned above.

[jordaaash]

Cool, thank you for providing those steps. I'll do the same tomorrow and check it out.

[jordaaash]

So I repeated this. Here's an interesting result:

I'm seeing the dependencies of the torus and blocto wallet adapters, for example, but @solana/wallet-adapter-* is missing from the node_modules shown.

If I back out and click ".." on the right, I see:

This is showing a src directory with .ts/.tsx files, not the JS files that are actually used in the build -- it must be using the sourcemap.

If I search the generated build/static/js directory for "blocto", I see the Blocto SDK is being included -- but the blocto package with the adapter is not. Same with "torus".

This indicates to me that the sub-dependencies of the adapters are being included, but the tree shaking is working for the adapters. I'll see what can be done to fix this.

[jordaaash]

#121 could help here.

[jordaaash]

I've tested out building the library after converting all the relevant packages to ESM: #132

Unfortunately, running yarn analyze from the react-ui-starter package leads to the same result.

Looking at the Blocto SDK's dist dir, the problem seems to be that it exports a UMD that can't be tree shaken effectively.

Still working on a solution here.

[jordaaash]

This has been implemented by converting the core and wallet packages to ESM with sideEffects: false to improve tree shaking. Adapters like Torus, Blocto, and Sollet still require loading third party deps, but these will only be included if used in your application.

[jordaaash]

Published:

• @solana/wallet-adapter-base@0.7.0
• @solana/wallet-adapter-react@0.13.0
• @solana/wallet-adapter-vue@0.3.0
• @solana/wallet-adapter-wallets@0.11.0
• @solana/wallet-adapter-example@0.14.0
• @solana/wallet-adapter-material-ui-starter@0.10.0
• @solana/wallet-adapter-nextjs-starter@0.5.0
• @solana/wallet-adapter-react-ui-starter@0.6.0
• @solana/wallet-adapter-ant-design@0.9.0
• @solana/wallet-adapter-material-ui@0.13.0
• @solana/wallet-adapter-react-ui@0.6.0
• @solana/wallet-adapter-bitpie@0.3.0
• @solana/wallet-adapter-blocto@0.3.0
• @solana/wallet-adapter-clover@0.2.0
• @solana/wallet-adapter-coin98@0.3.0
• @solana/wallet-adapter-ledger@0.7.0
• @solana/wallet-adapter-mathwallet@0.7.0
• @solana/wallet-adapter-phantom@0.7.0
• @solana/wallet-adapter-safepal@0.3.0
• @solana/wallet-adapter-slope@0.3.0
• @solana/wallet-adapter-solflare@0.4.0
• @solana/wallet-adapter-sollet@0.8.0
• @solana/wallet-adapter-solong@0.7.0
• @solana/wallet-adapter-tokenpocket@0.2.0
• @solana/wallet-adapter-torus@0.8.0