perf: reduce frontend build size#165
Draft
Atharva0506 wants to merge 1 commit into
Draft
Conversation
- 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/
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
React.lazyandSuspenseinApp.jsx. The browser now downloads smaller chunks in parallel and only loads what is necessary for the current route.package.json(e.g.,eth-crypto,ethereum-unit-converter,react-to-print,react-window) and removed an unused wildcard import ofwagmi/chains.vite-plugin-node-polyfillsto only include the bare minimum required by our Web3 libraries (buffer,crypto,stream,util), preventing unnecessary Node modules from bloating the browser bundle.frontend/public/and moved README-exclusive images (likenexus.png) to adocs/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.)
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:@lit-protocolethers.jswagmipulls inviem, but our custom smart contracts useethers. Migrating contract calls toviemallows us to uninstallethersentirely.react-toastifyvsreact-hot-toast, andreact-iconsvslucide-react. Aligning on a project standard will allow us to delete the duplicates.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:
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