Skip to content

feat: Implement route-based code splitting for improved performance (…#284

Open
emickwrld wants to merge 1 commit into
Nanle-code:masterfrom
emickwrld:feature/#261-route-based-code-splitting
Open

feat: Implement route-based code splitting for improved performance (…#284
emickwrld wants to merge 1 commit into
Nanle-code:masterfrom
emickwrld:feature/#261-route-based-code-splitting

Conversation

@emickwrld
Copy link
Copy Markdown

#261)

  • Convert all 25+ route components to React.lazy() for dynamic imports
  • Add Suspense boundaries with ChunkLoadingFallback component
  • Implement loading UI while chunks download
  • Enhance ErrorBoundary to detect and handle chunk loading failures
  • Add cache clearing logic for failed chunk loads
  • Optimize routes: Overview, Account, Transactions, Contracts, NetworkStats, Faucet, Builder, Compare, WalletConnect, TransactionSigner, PortfolioValue, NetworkMetricsChart, AccountActivityChart, BalanceHistoryChart, AdvancedChartSuite, TransactionBuilder, ContractInteraction, ContractABI, AdvancedTransactionSimulation, TransactionSimulator, DEXExplorer, ExplorerEmbed, RealTimeLedger, Analytics, SystemHealth, Settings, AssetDiscovery, MultisigManager, AuditLog, AnchorIntegration, AdvancedSearch, CacheStats, LiveActivityFeed, ClaimableBalances

Benefits:

  • Reduced initial bundle size by splitting route components
  • Improved Time to Interactive (TTI)
  • Better code splitting with Webpack chunks
  • Graceful error handling for failed chunk downloads
  • Enhanced user experience with loading states

Closes #261

…anle-code#261)

- Convert all 25+ route components to React.lazy() for dynamic imports
- Add Suspense boundaries with ChunkLoadingFallback component
- Implement loading UI while chunks download
- Enhance ErrorBoundary to detect and handle chunk loading failures
- Add cache clearing logic for failed chunk loads
- Optimize routes: Overview, Account, Transactions, Contracts, NetworkStats,
  Faucet, Builder, Compare, WalletConnect, TransactionSigner, PortfolioValue,
  NetworkMetricsChart, AccountActivityChart, BalanceHistoryChart, AdvancedChartSuite,
  TransactionBuilder, ContractInteraction, ContractABI, AdvancedTransactionSimulation,
  TransactionSimulator, DEXExplorer, ExplorerEmbed, RealTimeLedger, Analytics,
  SystemHealth, Settings, AssetDiscovery, MultisigManager, AuditLog,
  AnchorIntegration, AdvancedSearch, CacheStats, LiveActivityFeed, ClaimableBalances

Benefits:
- Reduced initial bundle size by splitting route components
- Improved Time to Interactive (TTI)
- Better code splitting with Webpack chunks
- Graceful error handling for failed chunk downloads
- Enhanced user experience with loading states
@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 1, 2026

Someone is attempting to deploy a commit to the nanle-code's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Jun 1, 2026

@emickwrld Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@Nanle-code
Copy link
Copy Markdown
Owner

@emickwrld resolve conflicts

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.

Implement Route-Based Code Splitting

2 participants