Code Splitting Demo

This page demonstrates various code splitting techniques used throughout the DailyBias app to improve performance.

Dynamic Imports

Bundle Splitting

Lazy Loading

Benefits of Code Splitting

Faster Initial Load

Only load what's needed for the initial page render

Reduced Bundle Size

Split code into smaller chunks for better caching

Better Performance

Load components on demand when users need them

Example 1: Component with Custom Loader

BiasCard component with a tailored loading skeleton

const DynamicBiasCard = dynamic(() => import("@/components/bias-card"), {
  loading: () => <BiasCardCompactLoader />,
  ssr: true
})

Example 2: Client-Side Only Component

Canvas component that requires browser APIs (no SSR)

const DynamicCanvas = dynamic(() => import("@/components/background-canvas"), {
  loading: () => <Skeleton />,
  ssr: false // Disable server-side rendering
})

Example 3: On-Demand Loading

ProgressStats component loaded only when needed

const DynamicProgressStats = dynamic(() => import("@/components/progress-stats"), {
  loading: () => <ProgressStatsLoader />
})

Example 4: Conditional Rendering

RecommendationCard loaded conditionally based on user state

{hasRecommendation && (
  <DynamicRecommendationCard bias={bias} reason={reason} />
)}

Implementation Guide

1. Create Dynamic Wrappers

Create wrapper files for each component you want to code-split:

// components/dynamic-bias-card.tsx
export const DynamicBiasCard = dynamic(
  () => import("./bias-card").then(mod => ({ default: mod.BiasCard })),
  { loading: () => <BiasCardLoader />, ssr: true }
)

2. Create Loading Fallbacks

Design skeleton loaders that match the component's layout:

export function BiasCardLoader() {
  return (
    <div className="glass rounded-2xl p-6 space-y-3">
      <Skeleton className="h-5 w-20" />
      <Skeleton className="h-7 w-full" />
      <Skeleton className="h-16 w-full" />
    </div>
  )
}

3. Use Dynamic Imports in Pages

Replace static imports with dynamic imports:

// Before:
import { BiasCard } from "@/components/bias-card"

// After:
import { DynamicBiasCard } from "@/components/dynamic-bias-card"

4. Configure Next.js

Optimize your Next.js configuration for bundle splitting:

// next.config.mjs
export default {
  webpack: (config) => {
    config.optimization.splitChunks = {
      chunks: 'all',
      cacheGroups: {
        default: false,
        vendors: false,
        commons: { name: 'commons', chunks: 'all', minChunks: 2 }
      }
    }
    return config
  }
}

Performance Impact

Initial Bundle Size Reduction

~30-40%

Time to Interactive (TTI) Improvement

~25-35%

First Contentful Paint (FCP)

~20-30% faster

* Actual improvements vary based on network conditions and device performance. These metrics are typical ranges observed in production environments.

Code Splitting Across DailyBias

Home Page

BiasCard, BackgroundCanvas, and Navigation are dynamically loaded

All Biases Page

Multiple BiasCards and RecommendationCard are code-split for better performance

Settings Page

ProgressStats component loaded on-demand to reduce initial load

Favorites & Detail Pages

Consistent dynamic loading patterns for optimal bundle splitting