Implement Route-Level Code Splitting and Dynamic Imports for Charting Libraries

[Lakes41]

Background

Heavy charting libraries (like TradingView Lightweight Charts or Recharts) are imported statically into the global application bundle.

Problem

The initial JavaScript payload is bloated, causing slow First Contentful Paint (FCP) and Time to Interactive (TTI) metrics, particularly for users navigating to non-chart pages like "Settings".

Expected Outcome

Charting libraries and complex analytics components are split into separate asynchronous chunks that only load when the user visits the specific analytics or trading routes.

Suggested Implementation

• Refactor static imports of chart components to use React.lazy() and Suspense.
• Configure Vite/Webpack to extract vendor charting libraries into a separate vendor-charts-[hash].js chunk.
• Implement a styled skeleton loader fallback while the chart chunk is fetching.

Acceptance Criteria

• Main application bundle size decreases by at least 30%.
• Network tab confirms charting JS is only requested when visiting the Analytics or Trading views.
• Skeleton loaders display seamlessly without layout shift.

Likely Affected Files

• src/pages/Analytics/index.tsx
• src/components/Charts/PriceChart.tsx
• vite.config.ts

Requirements

• Code splitting must not introduce hydration errors in SSR/SSG contexts (if Next.js/Remix is used).