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

[3scava1i3r]

Summary

Reduced the main JS bundle size via code-splitting and vendor chunking while preserving all functionality. Fixes #7

Changes

Vite Configuration (vite.config.ts)

• Added manualChunks configuration to split vendor libraries into separate chunks:
  • vendor-react: React + React DOM
  • vendor-query: @tanstack/react-query
  • vendor-wallet: wagmi + viem + @reown/appkit

Component Updates (src/components/dashboard-page.tsx)

• Lazy loaded ConnectWalletButton using React.lazy()
• Added Suspense wrapper with skeleton fallback for smooth UX
• No FOUC – CSS remains bundled as before

Documentation (BUNDLE_REPORT.md)

• Added before/after bundle size report
• Documented optimization strategy and future opportunities

Results

Metric	Before	After	Reduction
Main chunk (gzip)	~168 kB	~96 kB	43% ✅
Target	-	< 140 kB	✅ Met

Validation

• ✅ bun run build – Build successful
• ✅ bun run dev – Dev server working
• ✅ No broken dynamic imports
• ✅ CSS splitting preserved (no FOUC)

Future Optimizations

The vendor-wallet chunk is still ~431 kB gzipped due to heavy wallet libraries. Future opportunities:

• Lazy load wallet connectors individually
• Split MetaMask/WalletConnect/Coinbase SDKs into separate chunks
• Consider removing unused wallet connectors from bundle

---

Closes #7

[coderabbitai]

📝 Walkthrough

Walkthrough

Updated Vite build config to add rollupOptions.output with manualChunks splitting vendor-react, vendor-query, and vendor-wallet and custom asset filename patterns. Dashboard page now lazy-loads ConnectWalletButton via React.lazy with a Suspense-wrapped WalletButtonSkeleton placeholder. CI workflow (.github/workflows/ci.yml) added pull_request trigger; deno-deploy workflow removed its pull_request trigger.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	All changes directly support Issue #7 objectives. Minor CI workflow changes (ci.yml pull_request trigger, deno-deploy.yml removal) are ancillary infrastructure updates unrelated to the primary bundle optimization goal.	Remove or justify the workflow changes in ci.yml and deno-deploy.yml, or explain their necessity in the PR description, as they fall outside the stated bundle optimization scope.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title accurately summarizes the main change: bundle performance optimization via code-splitting reducing main chunk by 43%, directly matching the PR's core objective.
Description check	✅ Passed	Description comprehensively covers all changes (Vite config, lazy loading, documentation) and validation results, directly supporting the PR objectives.
Linked Issues check	✅ Passed	PR fully addresses Issue #7 requirements: manualChunks configuration splits vendor libraries, ConnectWalletButton is lazy-loaded, main chunk reduced from ~168kB to ~96kB (43% reduction), meeting <140kB target, with successful build/dev validation.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/components/dashboard-page.tsx (1)

13-15: Skeleton is fine, minor note on dimensions.

Hardcoded 180px × 40px could mismatch the actual button size across viewports. Consider matching the real button's CSS class dimensions or using min-width/min-height instead. Low priority.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/components/dashboard-page.tsx (1)

13-15: Consider adding aria-hidden or a label to the skeleton.

Screen readers will see an empty div. Minor accessibility improvement:

Proposed fix

-  <div className="wallet-button skeleton" style={{ width: "180px", height: "40px" }} />
+  <div className="wallet-button skeleton" style={{ width: "180px", height: "40px" }} aria-hidden="true" />

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

vite.config.ts (1)

24-37: node_modules/react matches more than just react.

id.includes("node_modules/react") also matches react-is, react-router, etc. — any package whose name starts with "react". Consider tightening:

Proposed fix

-          if (id.includes("react") && (id.includes("node_modules/react") || id.includes("node_modules/react-dom"))) {
+          if (id.includes("node_modules/react/") || id.includes("node_modules/react-dom/")) {

Also, @reown/appkit on line 34 omits the node_modules/ prefix unlike wagmi and viem — inconsistent but functionally fine.

[coderabbitai]

⚠️ 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: