fix(performance): lazy loading, dns-prefetch, and vendor chunk splitting

- Add loading="lazy" to img in TokenLogo and Avatar
- Add dns-prefetch for common blockchain RPC endpoints
- Add manualChunks to split vendor libs into separate cached chunks

Author: gabitoesmiapodo

index.html

@@ -31,6 +31,10 @@
   <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
   <meta name="apple-mobile-web-app-title" content="dAppBooster" />
   <link crossorigin="use-credentials" href="/favicon/site.webmanifest" rel="manifest" />
+  <!-- DNS prefetch for blockchain RPC endpoints -->
+  <link rel="dns-prefetch" href="https://eth.llamarpc.com" />
+  <link rel="dns-prefetch" href="https://cloudflare-eth.com" />
+  <link rel="dns-prefetch" href="https://gateway.tenderly.co" />
   <!-- Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

src/components/sharedComponents/Avatar.tsx

@@ -54,6 +54,7 @@ const Avatar: FC<AvatarProps> = ({
         <img
           alt={ensName ?? address}
           height="100%"
+          loading="lazy"
           src={ensImage}
           width="100%"
         />

src/components/sharedComponents/TokenLogo.tsx

@@ -101,6 +101,7 @@ const TokenLogo: FC<TokenLogoProps> = ({ size = 24, token }) => {
     <img
       alt={token.name}
       height={`${size}`}
+      loading="lazy"
       onError={() => setHasError(true)}
       src={getSrc(logoURI)}
       width={`${size}`}

vite.config.ts

@@ -17,6 +17,19 @@ export default defineConfig({
       hostname: 'https://dappbooster.dev',
     }),
   ],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'vendor-react': ['react', 'react-dom'],
+          'vendor-wagmi': ['wagmi', 'viem'],
+          'vendor-tanstack': ['@tanstack/react-query', '@tanstack/react-router'],
+          'vendor-chakra': ['@chakra-ui/react'],
+          'vendor-web3': ['@reown/appkit', '@reown/appkit-adapter-wagmi'],
+        },
+      },
+    },
+  },
   envPrefix: 'PUBLIC_',
   resolve: {
     alias: {