search

anza-xyz / wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.
https://anza-xyz.github.io/wallet-adapter/
Apache License 2.0
1.54k stars 942 forks source link

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

Closed codesart-4 closed 2 years ago

codesart-4 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.

Screenshot 2021-09-14 at 08 28 19

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 commented 3 years ago

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

jordaaash commented 3 years ago

This is fixed by https://github.com/solana-labs/wallet-adapter/commit/6d9c3a7e23c7dc7bad2234e828400571634fdc8b and has been published as a minor (breaking change) release to the affected packages.

The change that broke tree shaking was for https://github.com/solana-labs/wallet-adapter/issues/4 but I think the starter projects provide reasonable ways to get transpiling of modules working now.

codesart-4 commented 3 years ago

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

codesart-4 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

jordaaash commented 3 years ago

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

Screen Shot 2021-09-20 at 1 59 25 PM

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:

Screen Shot 2021-09-20 at 2 12 38 PM

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 commented 2 years ago

https://github.com/solana-labs/wallet-adapter/issues/121 could help here.

jordaaash commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Published: