Skip to content

feat(performance): bundle performance split – reduce main chunk by 43% #18

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
3scava1i3r wants to merge 4 commits into
base: development
Choose a base branch
from
Open

feat(performance): bundle performance split – reduce main chunk by 43% #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bef4f1c
feat(performance): bundle performance split – reduce main chunk by 43%
3scava1i3r Feb 7, 2026
332a30c
fix: coderabbit issues
3scava1i3r Feb 7, 2026
425cdc1
fix: coderabbit
3scava1i3r Feb 7, 2026
edd39a6
fix:docstring
3scava1i3r Feb 7, 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
1 change: 1 addition & 0 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ name: CI
on:
workflow_dispatch:
push:
pull_request:
Comment on lines 5 to +6

@coderabbitai coderabbitai Bot Feb 7, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

push + pull_request without branch filters → duplicate CI runs on every PR.

Both triggers fire when a PR branch is pushed. Consider scoping push to your default branch only:

Proposed fix 
   push:
+    branches: [main, development]
   pull_request:
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
push:
pull_request:
push:
branches: [main, development]
pull_request:


permissions:
contents: read
Expand Down
1 change: 0 additions & 1 deletion .github/workflows/deno-deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ name: Deno Deploy

on:
push:
pull_request:
workflow_dispatch:

jobs:
Expand Down
26 changes: 24 additions & 2 deletions src/components/dashboard-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,30 @@
import { lazy, Suspense } from "react";
import { useAppKitAccount, useAppKitNetwork } from "@reown/appkit/react";
import { ICONS } from "./iconography.tsx";
import { PoolDisplay } from "./pool-display.tsx";
import { ConnectWalletButton } from "./connect-wallet.tsx";
import { supportedChains } from "../wallet/config.ts";
import { useStatusMessageState } from "../context/status-message.tsx";

/**
* Lazy-loaded wallet connector button component.
* Dynamically imported to reduce initial bundle size.
* Falls back to skeleton while loading.
*/
const ConnectWalletButton = lazy(() => import("./connect-wallet.tsx").then(mod => ({ default: mod.ConnectWalletButton })));

/**
* Loading skeleton placeholder for the wallet button.
* Displayed while the wallet connector is being lazy-loaded.
* @returns {JSX.Element} Skeleton div with placeholder styling
*/
const WalletButtonSkeleton = () => (
<div className="wallet-button skeleton" style={{ width: "180px", height: "40px" }} />
);

/**
* Logo span component displaying the DAO logo.
* @returns {JSX.Element} Span containing the DAO logo icon
*/
const LogoSpan = () => <span id="header-logo-wrapper">{ICONS.DAO_LOGO}</span>;

export function DashboardPage() {
Expand All @@ -26,7 +46,9 @@ export function DashboardPage() {
</h1>
</div>

<ConnectWalletButton />
<Suspense fallback={<WalletButtonSkeleton />}>
<ConnectWalletButton />
</Suspense>
</section>

{/* Status Displays */}
Expand Down
27 changes: 27 additions & 0 deletions vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,33 @@ export default defineConfig({
build: {
cssCodeSplit: false,
outDir: "dist",
rollupOptions: {
output: {
/**
* Custom chunking function for vendor splitting.
* Separates heavy dependencies into distinct chunks to reduce initial bundle size.
* @param id - The module ID being evaluated
* @returns {string | undefined} Chunk name if module should be separated, undefined otherwise
*/
manualChunks(id) {
// Separate React + React DOM
if (id.includes("react") && (id.includes("node_modules/react") || id.includes("node_modules/react-dom"))) {
return "vendor-react";
}
// Separate TanStack Query
if (id.includes("@tanstack/react-query")) {
return "vendor-query";
}
// Separate wallet libraries
if (id.includes("node_modules/wagmi") || id.includes("node_modules/viem") || id.includes("@reown/appkit")) {
return "vendor-wallet";
}
},
chunkFileNames: "assets/[name]-[hash].js",
entryFileNames: "assets/[name]-[hash].js",
assetFileNames: "assets/[name]-[hash].[ext]",
},
},
},
worker: {
format: "es",
Expand Down
Loading