Skip to content

perf: reduce frontend build size#165

Draft
Atharva0506 wants to merge 1 commit into
StabilityNexus:mainfrom
Atharva0506:optimize/build-size
Draft

perf: reduce frontend build size#165
Atharva0506 wants to merge 1 commit into
StabilityNexus:mainfrom
Atharva0506:optimize/build-size

Conversation

@Atharva0506

@Atharva0506 Atharva0506 commented Jun 10, 2026

Copy link
Copy Markdown
Member

Addressed Issues:

Fixes #(TODO)

Description of Changes:
This PR significantly optimizes the frontend build size and initial page load speed. Previously, the application was compiling into a single massive 8.2 MB JavaScript chunk, which blocked the main thread and caused slow initial loads.

Key Optimizations Implemented:

  • Route-level Code Splitting: Implemented React.lazy and Suspense in App.jsx. The browser now downloads smaller chunks in parallel and only loads what is necessary for the current route.
  • Dependency Cleanup: Removed heavy unused dependencies from package.json (e.g., eth-crypto, ethereum-unit-converter, react-to-print, react-window) and removed an unused wildcard import of wagmi/chains.
  • Node Polyfill Reduction: Trimmed the injected vite-plugin-node-polyfills to only include the bare minimum required by our Web3 libraries (buffer, crypto, stream, util), preventing unnecessary Node modules from bloating the browser bundle.
  • Asset Management: Deleted entirely unused images from frontend/public/ and moved README-exclusive images (like nexus.png) to a docs/assets/ folder so they are no longer bundled into the React build.

Screenshots/Recordings:

(Below is the Before/After comparison of the Vite build output sizes, demonstrating the chunk splitting in action.)

Before Optimizations (Single 8.2MB Chunk) After Optimizations (Parallel Route Chunks)
image image

Additional Notes:

Future Optimization Opportunities (Drafted for Mentor Review):
While profiling the bundle using rollup-plugin-visualizer, I identified a few architectural redundancies. I have intentionally left these out of this PR to keep the scope safe and focused, but I wanted to document them here for future sprints:

Module / Library Current Size Impact Optimization Strategy Estimated Savings
@lit-protocol ~3.4 MB Replace with Waku: Since we are planning to transition to Waku, removing the Lit SDK will completely eliminate this massive cryptography chunk. 3.4 MB
ethers.js ~800 KB Migrate to Viem: Our app currently pays the size penalty for two Web3 libraries. wagmi pulls in viem, but our custom smart contracts use ethers. Migrating contract calls to viem allows us to uninstall ethers entirely. ~800 KB
Duplicate UI Libs ~100 KB Standardize Libraries: We currently bundle both react-toastify vs react-hot-toast, and react-icons vs lucide-react. Aligning on a project standard will allow us to delete the duplicates. ~100 KB

AI Usage Disclosure:

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Check one of the checkboxes below:

  • This PR does not contain AI-generated code at all.
  • This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: I utilized Gemini 3.1 Pro during the profiling of this PR to parse the Rollup visualizer stats, identify the Web3 dependency overlaps (Viem vs Ethers), and formulate the deep-dive architectural recommendations in the table above

Checklist

  • My PR addresses a single issue, fixes a single bug or makes a single improvement.
  • My code follows the project's code style and conventions
  • If applicable, I have made corresponding changes or additions to the documentation
  • If applicable, I have made corresponding changes or additions to tests
  • My changes generate no new warnings or errors
  • I have joined the Discord server and I will share a link to this PR with the project maintainers there
  • I have read the Contribution Guidelines
  • Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
  • I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

- Implement route-level code splitting using React.lazy and Suspense
- Remove unused wildcard import of wagmi chains in App.jsx
- Remove unused heavy dependencies (eth-crypto, ethereum-unit-converter, react-to-print, react-window) from package.json
- Trim injected nodePolyfills to only required modules (buffer, crypto, stream, util) for faster loading
- Delete unused images from frontend/public and move README-only image to docs/assets/
@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: b995f2fe-d2cc-41aa-8922-3497a1823399

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant