The application has 15+ giant client components (all 'use client') loaded eagerly: beast-mode-tab.tsx (33KB), deals/deal-pipeline-dashboard.tsx (36KB), crm/crm-health-dashboard.tsx (28KB), billing/revenue-dashboard.tsx (27KB), support-tickets-dashboard.tsx (42KB), project-features-tab.tsx (30KB), seo-marketing-tab.tsx (20KB), env-vars-settings.tsx (27KB), command-palette.tsx (17KB), notification-settings.tsx (18KB). None use next/dynamic with lazy loading. All of these are compiled into the initial JS bundle and downloaded on first navigation even if the user never visits those tabs. The product page layout has 12+ tabs, all pre-loaded.
Category: bundle
File: src/app/dashboard/products/[id]/layout.tsx, src/components/beast-mode-tab.tsx, src/components/deals/deal-pipeline-dashboard.tsx, src/components/support-tickets-dashboard.tsx
Recommendation: Wrap all heavy tab components in next/dynamic(() => import(...), { loading: () => <Skeleton /> }) at the page or tab level. The 12 product sub-pages each import one large component — each should be dynamically imported. This alone could reduce the initial JS parse time by 200–400KB.
Estimated Improvement: Initial JS bundle reduction of 200–400KB; Time to Interactive improvement of 500ms–2s on slower connections