From ad55ae257f178f19a0ad58ae25e2669ba54cc80c Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Mon, 23 Mar 2026 18:39:51 -0300
Subject: [PATCH 1/2] 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
---
 index.html                                    |  4 ++++
 src/components/sharedComponents/Avatar.tsx    |  1 +
 src/components/sharedComponents/TokenLogo.tsx |  1 +
 vite.config.ts                                | 13 +++++++++++++
 4 files changed, 19 insertions(+)

diff --git a/index.html b/index.html
index ebcc0889..5c3b95bc 100644
--- a/index.html
+++ b/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 />
diff --git a/src/components/sharedComponents/Avatar.tsx b/src/components/sharedComponents/Avatar.tsx
index 3d54ea86..83242610 100644
--- a/src/components/sharedComponents/Avatar.tsx
+++ b/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%"
         />
diff --git a/src/components/sharedComponents/TokenLogo.tsx b/src/components/sharedComponents/TokenLogo.tsx
index 37ccc101..87627cdf 100644
--- a/src/components/sharedComponents/TokenLogo.tsx
+++ b/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}`}
diff --git a/vite.config.ts b/vite.config.ts
index e050c981..2d9b6863 100644
--- a/vite.config.ts
+++ b/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: {

From ba8c91b61ba62a20a353a49e069af98d879f12e9 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Mon, 23 Mar 2026 19:01:59 -0300
Subject: [PATCH 2/2] fix(performance): add react-dom/client to vendor-react
 chunk

Rollup treats subpath imports as separate module IDs; without explicitly
including react-dom/client the subpath resolves into a separate chunk,
splitting the React vendor bundle and defeating cache stability.
---
 vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite.config.ts b/vite.config.ts
index 2d9b6863..c79df3d1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -21,7 +21,7 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks: {
-          'vendor-react': ['react', 'react-dom'],
+          'vendor-react': ['react', 'react-dom', 'react-dom/client'],
           'vendor-wagmi': ['wagmi', 'viem'],
           'vendor-tanstack': ['@tanstack/react-query', '@tanstack/react-router'],
           'vendor-chakra': ['@chakra-ui/react'],