[bug]: Vite big size, no treeshakable

[reslear]

Link to minimal reproducible example

https://stackblitz.com/edit/vitejs-vite-zxnq49?file=src%2FApp.vue

Summary

A simple template, for playback

1. build the project and open the demo in a new tab
2. inspect the code - you will see a message about react devtools (which tells you to enable metamask sdk) and click on chunk.

we get chunk chunk-22BZIRQV.js?v=998e5bee:39559 - 2,5mb :(

and more, so this is @wagmi/connectors:

So i found solution use ESM:

fork https://stackblitz.com/edit/vitejs-vite-bngsgj?file=vite.config.ts

  optimizeDeps: {
    exclude: ['@web3modal/wagmi'],
  },

but we got error:

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/@[email protected]/node_modules/@walletconnect/time/dist/cjs/index.js?v=c28150ba' does not provide an export named 'fromMiliseconds' 

same WalletConnect/walletconnect-utils#134

so we need to prepare or customize vite so that it doesn't bandwidth huge files.

List of related npm package versions

"@wagmi/connectors": "^4.1.26",
"@wagmi/core": "^2.6.17",
"@web3modal/wagmi": "^4.1.8",
"viem": "^2.9.19",
"vue": "^3.4.21"

[linear]

W3M-247 [bug]: Vite big size, no treeshakable

[glitch-txs]

mmm, we do tree shaking.

We also don't use the MM SDK internally, so that shouldn't be bundled unless you're using the Wagmi's MetaMask connector.

Adding the package as external will break the app as you're not bundling it.

[reslear]

It is interesting that this happens only during development, as for the build it does not happen, maybe it is a vite problem.

[reslear]

I found similar issues:

• "Pre-bundling dependencies" in node_modules chunking does not respect plugins queue vitejs/vite#5364
• Importing an ESM package that uses an esModuleInterop package is not compatible in Dev mode. vitejs/vite#6632
• [Feature] Manual chunks evanw/esbuild#207

Current workaround: vitejs/vite#6582

uses https://github.com/MilanKovacic/vite-plugin-externalize-dependencies

exclude specific dependencies from the Vite bundle during development.

// vite.config.ts
import externalize from 'vite-plugin-externalize-dependencies'
// ...
    externalize({
      externals: ['@wagmi/connectors'],
    }),
// ...

Also, on the Web3Modal side, we need to:

• Sort out the support for tree shaking (e.g., dynamic import).
• Fix ESM version; otherwise, it doesn't work without bundlers.

[glitch-txs]

I don't recommend that, you can however try

externals: ['@web3modal/siwe', '@walletconnect/modal', '@metamask/sdk']

[glitch-txs]

tree shaking is not the same as dynamic import. We use package imports to tree shake unused hooks for other frameworks, but the rest we use pretty much everything.

Also, we use dynamic imports for the SIWE package, but this is still bundled, you will see it generates a chunk, but this won't be shipped to the browser because it's splitted.

You can also check for the JS size sent to the browser from the Network tab.

[reslear]

And better:

import { defineConfig } from 'vite'
import externalize from 'vite-plugin-externalize-dependencies'

// https://vitejs.dev/config/
export default defineConfig({
    // https://github.com/WalletConnect/web3modal/issues/2159
    // https://github.com/reslear/metakeep-wagmi-connector/blob/main/playground/vite.config.mts#L20 
    externalize({
      externals: [
        '@web3modal/siwe',
        '@walletconnect/modal',
        '@metamask/sdk',
        '@coinbase/wallet-sdk',
      ],
    }),
  ],
})

or add from wagmi/connectors:

https://github.com/wevm/wagmi/blob/de17905c91436703cd42c45475e8e7e26a631c0e/packages/connectors/package.json#L47-L53

@glitch-txs This solves my problem, I can close it.
Also maybe needs add it to the FAQ.

[glitch-txs]

Coinbase one is used by Web3Modal, if you remove it the coinbase wallet won't work on mobile.
Of course it's up to you if you'd like to support it on mobile.

[reslear]

@glitch-txs

Yes, but it's solution just ONLY for local development - vite esbuild pre-bundling.

for build vite use rollup, and it's needs modify:

  build: {
    rollupOptions: {
      output: {
        manualChunks: {