How do I keep my bundle small without removing the MM Connect EVM SDK?

MetaMask Connect
1

Use dynamic import to load @metamask/connect-evm on demand instead of at
app boot. The SDK is also structured so unused transports tree-shake on the
extension path.

// Load the SDK only on first interaction — not on initial page render.
async function getClient() {
  const { createEVMClient, getInfuraRpcUrls } = await import('@metamask/connect-evm');
  return createEVMClient({
    dapp: { name: 'My DApp', url: window.location.href },
    api: {
      supportedNetworks: getInfuraRpcUrls({
        infuraApiKey: 'YOUR_INFURA_KEY',
        chainIds: ['0x1', '0x89', '0xa4b1'],
      }),
    },
    ui: { preferExtension: true, showInstallModal: true },
  });
}
document.querySelector('#connect')?.addEventListener('click', async () => {
  const client = await getClient();
  await client.connect();
});

This keeps the initial bundle untouched and pays the SDK cost only when the user actually intends to connect — which is the same trigger you’d use for lazy-loading anyway.