Slashing Load Times with Dynamic Imports — How We Cut 400 KB from the Initial Bundle
Slashing Load Times with Dynamic Imports
How We Cut Up to 400 KB from the Initial Bundle (v1.0.48)
One of the quiet costs of building a feature-rich SaaS dashboard is JavaScript bloat. Every powerful UI component you add gets bundled, shipped, and parsed by the browser — whether or not the user ever looks at it. In v1.0.48 we tackled this problem head-on across the entire platform.
The Problem: Eager Loading Everything
The SaaS Factory dashboard product page has 12+ tabs: Beast Mode, Deal Pipeline, CRM Health, Revenue, Support Tickets, SEO & Marketing, Environment Variables, and more. Each tab is backed by a large React component marked 'use client'.
Before this release, every single one of those components was included in the initial JavaScript bundle. Open the dashboard for the first time and your browser would download, parse, and compile code for the Support Tickets dashboard (42 KB), the Deal Pipeline (36 KB), Beast Mode (33 KB), and nine other heavy components — even if you only wanted to check the Revenue tab.
The cumulative weight: 200–400 KB of JavaScript on the critical path, adding up to 2 seconds of avoidable latency on slower connections before the app became interactive.
The Fix: next/dynamic with Skeleton Loaders
The solution is straightforward but impactful: replace static imports with next/dynamic so each component is only fetched when the user navigates to its tab.
// Before
import SupportTicketsDashboard from '@/components/support-tickets-dashboard';
// After
import dynamic from 'next/dynamic';
const SupportTicketsDashboard = dynamic(
() => import('@/components/support-tickets-dashboard'),
{ loading: () => <Skeleton /> }
);
This pattern was applied to all 12 product sub-pages in src/app/dashboard/products/[id]/layout.tsx and to each of the heavy components themselves, including:
beast-mode-tab.tsx(33 KB)deals/deal-pipeline-dashboard.tsx(36 KB)support-tickets-dashboard.tsx(42 KB)crm/crm-health-dashboard.tsx(28 KB)billing/revenue-dashboard.tsx(27 KB)project-features-tab.tsx(30 KB)seo-marketing-tab.tsx(20 KB)env-vars-settings.tsx(27 KB)command-palette.tsx(17 KB)notification-settings.tsx(18 KB)
What Users Experience
| Metric | Before | After |
|---|---|---|
| Initial JS bundle | Bloated (+400 KB heavy components) | Minimal — only shell & active tab |
| Time to Interactive (slow connection) | Up to 2s slower | 500 ms–2 s faster |
| Tab switching | Instant (pre-loaded) | Near-instant (cached after first visit) |
| Loading experience | Blank / janky | Smooth skeleton placeholder |
The { loading: () => <Skeleton /> } option ensures users see a structured placeholder immediately while the tab's chunk is fetched in the background — no blank screens, no layout shift.
Why This Matters for an Autonomous Platform
SaaS Factory runs autonomously and serves dashboards that operators check periodically — often on mobile or lower-bandwidth connections. Every millisecond saved on Time to Interactive means faster access to the metrics, pipelines, and controls that keep the business running. Code splitting is one of the highest-leverage, lowest-risk performance wins available in Next.js, and it's now applied consistently across every major dashboard surface.
Key Files Changed
src/app/dashboard/products/[id]/layout.tsx— dynamic imports for all 12 tab componentssrc/components/beast-mode-tab.tsxsrc/components/deals/deal-pipeline-dashboard.tsxsrc/components/support-tickets-dashboard.tsx- (and all other heavy dashboard components listed above)
Released in v1.0.48. See the Changelog for the full version history.