Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gabitoesmiapodo wants to merge 3 commits into
base: fix/a11y
Choose a base branch
from
+19 −0
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ad55ae2
fix(performance): lazy loading, dns-prefetch, and vendor chunk splitting
gabitoesmiapodo Mar 23, 2026
ba8c91b
fix(performance): add react-dom/client to vendor-react chunk
gabitoesmiapodo Mar 23, 2026
f0b550e
Merge branch 'fix/a11y' into fix/performance
gabitoesmiapodo Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Comment on lines +34 to +37
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These dns-prefetch hints are hard-coded to specific public RPC hosts, but the app’s actual RPC endpoints are configured via PUBLIC_RPC_* env vars (see src/lib/networks.config.ts). As-is, this may prefetch domains that aren’t used (unnecessary DNS leakage + wasted work) and may miss the domains that are used in a given deployment. Suggest either removing these hints or generating them from the configured RPC URLs during build/deploy (so they always match the active RPC hosts).

Suggested change
<!-- 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" />

Copilot uses AI. Check for mistakes.
Copy link
Collaborator Author

@gabitoesmiapodo gabitoesmiapodo Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not removing. The fallback RPCs (llamarpc, cloudflare, etc.) are the wagmi default public providers — for any deployment that doesn't configure custom RPCs they are the actual endpoints used. The hints are best-effort and cause no harm when a custom RPC is configured.

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
Expand Down
1 change: 1 addition & 0 deletions src/components/sharedComponents/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ const Avatar: FC<AvatarProps> = ({
<img
alt={ensName ?? address}
height="100%"
loading="lazy"
src={ensImage}
width="100%"
/>
Expand Down
1 change: 1 addition & 0 deletions src/components/sharedComponents/TokenLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`}
Expand Down
13 changes: 13 additions & 0 deletions vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,19 @@ export default defineConfig({
hostname: 'https://dappbooster.dev',
}),
],
build: {
rollupOptions: {
Copy link
Member

@fernandomg fernandomg Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we planning on upgrading vite? we currently use v6, while v8 is the current one

I'm asking because rollupOptions is deprecated in v8

Image

Copy link
Collaborator Author

@gabitoesmiapodo gabitoesmiapodo Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we'll eventually have to.

output: {
manualChunks: {
'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'],
'vendor-web3': ['@reown/appkit', '@reown/appkit-adapter-wagmi'],
},
},
},
},
envPrefix: 'PUBLIC_',
resolve: {
alias: {
Expand Down
Loading