Splitting by Route and Feature

Route-based and feature-based code splitting are critical strategies for optimizing load times and improving Core Web Vitals. By isolating code execution to specific routes or features, you reduce the initial bundle size and enable on-demand loading. This section covers techniques for implementing these patterns in Next.js and micro-frontend architectures.

---

Route-Based Code Splitting in Next.js

Route-based splitting ensures components are only loaded when their corresponding route is accessed. Next.js provides built-in tools like next/dynamic and dynamic imports to achieve this.

Example: Lazy-Loading Route-Specific Components

// pages/dashboard.tsx
import dynamic from 'next/dynamic';

const DashboardContent = dynamic(() => import('../components/Dashboard'), {
  loading: () => <p>Loading dashboard...</p>,
});

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <DashboardContent />
    </div>
  );
}

This approach ensures the Dashboard component is only loaded when the /dashboard route is accessed, reducing the initial load time for other pages.

Splitting by Route with next.config.js

For advanced use cases, configure Webpack to split code based on route patterns:

// next.config.js
module.exports = {
  webpack(config, { isServer }) {
    if (!isServer) {
      config.optimization.splitChunks = {
        chunks: 'all',
        maxInitialChunkSize: 500000,
        maxAssetSize: 500000,
      };
    }
    return config;
  },
};

This configuration splits code into smaller chunks, improving load performance for route-specific assets.

---

Feature-Based Code Splitting

Feature-based splitting isolates functionality into separate bundles, ideal for micro-frontends or modular applications. Each feature can be developed, deployed, and loaded independently.

Example: Splitting a Feature into a Separate Bundle

1. Create a feature directory:

   /features
     /user-profile
       index.js
       styles.css
   

2. Use dynamic imports to load the feature:

   // app/features/user-profile/page.js
   export default function UserProfile() {
     return <div>User Profile Content</div>;
   }
   

3. Lazy-load the feature in a parent component:

   const UserProfile = dynamic(() => import('../features/user-profile'), {
     loading: () => <p>Loading user profile...</p>,
   });
   

This approach allows features to be updated or replaced without rebuilding the entire application.

---

Micro-Frontends and Feature Isolation

Micro-frontends extend feature-based splitting by decoupling UI components into independent applications. Each micro-frontend can be hosted separately and integrated via iframes or a shared router.

Example: Integrating Micro-Frontends with Next.js

1. Create a micro-frontend as a separate Next.js app:

   /microfrontends
     /user-profile
       pages
         index.js
   

2. Load the micro-frontend dynamically:

   const UserProfile = dynamic(() => import('http://localhost:3001/user-profile'), {
     loading: () => <p>Loading user profile...</p>,
   });
   

3. Use a router to manage navigation between micro-frontends:

   // app/router.js
   const routes = [
     { path: '/dashboard', component: Dashboard },
     { path: '/user-profile', component: UserProfile },
   ];
   

This pattern enables teams to work on isolated features while maintaining a unified user experience.

---

Diagrams

Route-Based Splitting

Home Page → [Bundle 1]  
Dashboard → [Bundle 2] (loaded via dynamic import)  
Settings → [Bundle 3] (loaded via dynamic import)  

Feature-Based Splitting

Main App → [Bundle 1]  
User Profile (micro-frontend) → [Bundle 2]  
Analytics (micro-frontend) → [Bundle 3]  

---

Key takeaways

• Route-based splitting in Next.js uses next/dynamic and dynamic imports to load components on demand, improving LCP and FID.
• Feature-based splitting isolates functionality into separate bundles, enabling modular development and easier maintenance.
• Micro-frontends extend feature-based splitting by decoupling UI components into independent applications, allowing teams to work in parallel.
• Always combine code splitting with performance tools like Lighthouse and Web Vitals to measure its impact on Core Web Vitals.