[Performance] No lazy loading for heavy third-party dependencies in the initial bundle

[RUKAYAT-CODER]

Overview

package.json includes Monaco Editor (@monaco-editor/react), video.js, and ethers as top-level dependencies imported statically throughout the application. These libraries add 400KB+ to the initial JavaScript bundle, increasing Time to Interactive for all users, including those who never visit the editor, video, or Web3 pages.

Specifications

Features:

• Monaco Editor, video.js, and ethers are loaded only when the pages that need them are visited
• Initial bundle size is reduced by at least 200KB gzipped

Tasks:

• Wrap Monaco Editor import with next/dynamic: const MonacoEditor = dynamic(() => import('@monaco-editor/react'), { ssr: false })
• Apply the same pattern to video.js player component and ethers.js imports in client components
• Run next build and compare bundle analysis before and after using ANALYZE=true

Impacted Files:

• Any component importing @monaco-editor/react, video.js, or ethers directly
• next.config.ts

Acceptance Criteria

• Bundle analysis shows Monaco, video.js, and ethers in separate async chunks
• Initial JS bundle is reduced by at least 200KB gzipped
• Lazy-loaded components still function correctly after the dynamic import resolves

[Emoji-dot]

@Emoji-dot has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Emoji-dot to this issue.

[emteebug12-jpg]

@emteebug12-jpg has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainers! I’d love to help out with this issue. I’ve checked the current codebase/documentation and know exactly what needs to be updated to make this clearer. I will ensure everything aligns perfectly with your existing contribution guidelines.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @emteebug12-jpg to this issue.

[drips-wave]

Congratulations, @Emoji-dot! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @Emoji-dot: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊