Improve Tree Shakability / Reduce Size of Library

[stevenkeith85]

First impressions are really good of the library. Core seems easier to integrate into an existing app.

At first glance, the import cost of createClient and MetaMaskConnector seem quite large. (I haven't looked at the source though; just going by the VSCode plugin)

Keeping the bundle size of my app down is pretty important.

Any work planned on shrinking parts of the library or improving Tree Shaking (if possible?)

Thanks

[coindegen]

CORRECTION:

For posterity this is only a problem when using dynamic imports. Static imports should tree-shake just fine. See #3565 (comment)

---

I want to second this. I am manually bundling my dependencies with vite, and believe there is scope for huge savings by exporting each connector individually.

If I import a single connector like this:

  const { walletConnect } = await import("@wagmi/connectors");

My bundle size increases by 2.8 MB:

dist/assets/index-5k07z1CK.js               2,804.26 kB │ gzip: 834.70 kB

In contrast, if I copy paste the walletConnect.js connector and vendor it myself, my bundle shrinks dramatically:

  const { walletConnect } = await import("./vendor/walletConnect");

dist/assets/walletConnect-O7Ae_OJC.js       389.10 kB │ gzip: 116.42 kB

Here are more details:
https://gist.github.com/coindegen/fbf0842a89ddb39b019bc9926fea3129

Due to the structure of the package exports, is not possible to import connectors individually, I get the following Typescript error:

  Could not find a declaration file for module '@wagmi/connectors/dist/esm/walletConnect'. '/Users/madhava/Sites/projects/beth/htmx-app/node_modules/@wagmi/connectors/dist/esm/walletConnect.js' implicitly has an 'any' type.
  If the '@wagmi/connectors' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@wagmi/connectors/dist/esm/walletConnect';`ts(7016)

If you'd like me to share my repo I'd be happy to.