Q22 · Web3 场景优化

连接钱包（MetaMask 等）这一步，前端怎么做得既快又不影响整体性能？

钱包连接MetaMask懒加载

⚡ 速记答案（30 秒）

不要一进页面就强制弹钱包连接：首屏优先渲染内容，连接钱包按需触发
检测钱包注入时：避免在 window.onload 前后做一堆同步检测，尽量放异步流程
状态持久化：记住上次连接的钱包类型，下一次快速恢复连接
连接组件 / 逻辑按需加载，避免成为首屏性能瓶颈

📖 详细讲解

钱包连接优化策略

1. 延迟加载

• 钱包相关代码懒加载

• 不在首屏阻塞加载

2. 快速恢复

• 记住上次连接的钱包

• 页面刷新后自动重连

3. 状态管理

• 连接状态全局共享

• 避免多次初始化

4. 用户体验

• 不强制首屏连接

• 提供清晰的连接反馈

• 处理连接超时

实现要点

// 懒加载钱包连接模块
const connectWallet = async () => {
  const { WalletConnector } = await import('./wallet');
  return WalletConnector.connect();
};

💻 代码示例

钱包连接状态持久化

const WALLET_KEY = 'last_connected_wallet';

// 保存上次连接的钱包类型
function saveLastWallet(walletType: string) {
  localStorage.setItem(WALLET_KEY, walletType);
}

// 尝试自动重连
async function tryAutoConnect() {
  const lastWallet = localStorage.getItem(WALLET_KEY);
  if (!lastWallet) return null;

  // 检查钱包是否已解锁（不会弹出授权框）
  if (window.ethereum?.isConnected?.()) {
    try {
      const accounts = await window.ethereum.request({
        method: 'eth_accounts', // 不是 eth_requestAccounts
      });
      if (accounts.length > 0) {
        return accounts[0];
      }
    } catch {
      // 静默失败
    }
  }
  return null;
}

💡

面试技巧：回答性能问题时，先说指标和标准，再讲优化手段，最后结合实际项目经验。