Code splitting and lazy loading in Remix - Deep Dive

Overview - Code splitting and lazy loading

What is it?

Code splitting and lazy loading are techniques used in Remix to break a large app into smaller pieces. Instead of loading all code at once, the app loads only what is needed for the current page or feature. This makes the app faster and more responsive for users.

Why it matters

Without code splitting and lazy loading, users must wait for the entire app's code to download before interacting. This causes slow page loads and poor experience, especially on slow networks or devices. These techniques improve speed and reduce wasted data, making apps feel smooth and fast.

Where it fits

Before learning this, you should understand basic Remix routing and React components. After mastering code splitting and lazy loading, you can explore advanced performance optimizations like prefetching and caching strategies.

Mental Model

Core Idea

Load only the code you need when you need it, instead of everything upfront.

Think of it like...

It's like unpacking only the suitcase you need for today's trip instead of carrying all your luggage everywhere.

App Start
  │
  ├─ Load Core Code (Remix runtime, main layout)
  │
  ├─ Load Page 1 Code (only when user visits Page 1)
  │
  └─ Load Page 2 Code (only when user visits Page 2)

Each page's code is a separate chunk loaded on demand.

Build-Up - 7 Steps

1

Foundation

Understanding Remix Routes and Components

Concept: Learn how Remix organizes app pages using routes and components.

Remix uses a file-based routing system. Each file in the routes folder corresponds to a page. Components inside these files define what the user sees. When you visit a URL, Remix loads the matching route's component.

Result

You know how Remix maps URLs to components and how pages are structured.

Understanding routes is key because code splitting happens at the route level in Remix.

2

Foundation

What is Code Splitting in Remix?

Concept: Code splitting means breaking app code into smaller chunks that load separately.

Instead of bundling all JavaScript into one big file, Remix splits code by routes. When a user visits a page, only that page's code chunk loads. This reduces initial load time and speeds up navigation.

Result

You see that Remix automatically splits code by routes to improve performance.

Knowing that Remix splits code by route helps you understand how lazy loading fits in.

3

Intermediate

Lazy Loading Components with React.lazy

🤔Before reading on: Do you think React.lazy loads components immediately or only when needed? Commit to your answer.

Concept: React.lazy lets you load components only when they are rendered, not before.

You can wrap a component import with React.lazy(() => import('./MyComponent')). This tells React to load MyComponent only when it appears on screen. Combine with to show fallback UI while loading.

Result

Components load on demand, reducing initial bundle size and speeding up app start.

Understanding lazy loading at the component level helps you control loading behavior beyond routes.

4

Intermediate

Using Remix's Dynamic Imports for Routes

🤔Before reading on: Does Remix require manual code splitting or does it handle route chunking automatically? Commit to your answer.

Concept: Remix automatically splits code by routes but you can also use dynamic imports for nested components.

Remix creates separate bundles for each route file. For nested components inside routes, you can use dynamic import() to lazy load them. This gives fine control over what loads and when.

Result

Your app loads route code on demand and can lazy load parts inside routes for better performance.

Knowing Remix's automatic route splitting plus manual dynamic imports lets you optimize loading precisely.

5

Advanced

Handling Loading States with Suspense and Fallbacks

🤔Before reading on: Do you think lazy loading components block the UI or allow showing placeholders? Commit to your answer.

Concept: React Suspense lets you show a fallback UI while lazy components load.

Wrap lazy loaded components with }>. This shows a loading spinner or message until the component finishes loading. It improves user experience by avoiding blank screens.

Result

Users see smooth transitions with loading indicators instead of waiting blindly.

Handling loading states well is crucial for perceived performance and user satisfaction.

6

Advanced

Prefetching Code for Faster Navigation

🤔Before reading on: Can you guess if prefetching loads code before user requests it or only after? Commit to your answer.

Concept: Prefetching loads code chunks in the background before the user visits them.

Remix supports prefetching route code when links appear in the viewport or on hover. This means the next page's code is ready instantly when clicked, making navigation feel instant.

Result

Navigation between pages is faster because code is already loaded ahead of time.

Prefetching balances loading speed and data use by loading code just before it's needed.

7

Expert

Avoiding Common Pitfalls in Lazy Loading

🤔Before reading on: Do you think lazy loading always improves performance? Commit to your answer.

Concept: Lazy loading can hurt performance if overused or misused, causing delays or flickers.

Loading too many small chunks can cause many network requests, slowing the app. Also, not handling loading states causes bad UX. Experts balance chunk size, prefetching, and fallbacks carefully.

Result

You learn to use lazy loading wisely to truly improve app speed and user experience.

Knowing when and how to lazy load prevents common performance and UX problems in production apps.

Under the Hood

Remix uses a bundler (like Vite or Webpack) to analyze route files and split code into chunks per route. When the app runs, the browser loads the main chunk first. When navigation happens, Remix dynamically loads the needed chunk via JavaScript import(). React.lazy uses this dynamic import to fetch components on demand. Suspense tracks loading state and renders fallback UI until the chunk is ready.

Why designed this way?

This design balances initial load speed with app interactivity. Early web apps loaded all code upfront, causing slow starts. Splitting by route matches user navigation patterns, loading only what is needed. React.lazy and Suspense provide a declarative way to handle async loading in UI. Alternatives like loading everything upfront or manual chunking were less efficient or more complex.

┌───────────────┐
│   Browser     │
└──────┬────────┘
       │
       ▼
┌───────────────┐       ┌───────────────┐
│ Main Chunk    │──────▶│ Route Chunk 1 │
│ (Core code)   │       └───────────────┘
└───────────────┘              │
       │                       ▼
       │               ┌───────────────┐
       │               │ Route Chunk 2 │
       │               └───────────────┘
       │                       │
       ▼                       ▼
┌───────────────┐       ┌───────────────┐
│ React.lazy()  │◀──────│ Dynamic import │
│ Suspense UI   │       │ loads chunks  │
└───────────────┘       └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does lazy loading always make your app faster? Commit to yes or no.

Common Belief: Lazy loading always improves app speed because it loads less code upfront.

Reality: Lazy loading can slow down navigation if chunks are too small or loading states are not handled well.

Why it matters: Misusing lazy loading can cause flickering UI or delays, hurting user experience instead of helping.

Quick: Does Remix require manual code splitting for routes? Commit to yes or no.

Common Belief: You must manually split code for each route in Remix.

Reality: Remix automatically splits code by route files without manual setup.

Why it matters: Thinking manual splitting is needed wastes time and causes unnecessary complexity.

Quick: Can React.lazy be used outside of routes for any component? Commit to yes or no.

Common Belief: React.lazy only works for route components in Remix.

Reality: React.lazy works for any component, letting you lazy load parts inside routes too.

Why it matters: Knowing this lets you optimize nested components, not just whole pages.

Quick: Does prefetching load code after the user clicks a link? Commit to yes or no.

Common Belief: Prefetching waits until the user clicks to load code.

Reality: Prefetching loads code in the background before the user clicks, speeding up navigation.

Why it matters: Misunderstanding prefetching leads to missing out on faster page transitions.

Expert Zone

1

Remix's route-based code splitting works best with flat route structures; deeply nested routes may require manual dynamic imports for optimal chunking.

2

Prefetching strategies must balance network usage and speed; aggressive prefetching can waste bandwidth on unused code.

3

React Suspense fallback UI can be customized per component to improve perceived performance and avoid layout shifts.

When NOT to use

Avoid lazy loading for critical UI components needed immediately on page load, as it adds delay. Instead, bundle these components upfront. For very small apps, code splitting may add unnecessary complexity; a single bundle can be simpler and fast enough.

Production Patterns

In production Remix apps, developers rely on automatic route chunking combined with React.lazy for nested components. They implement Suspense fallbacks for smooth loading states and use Remix's prefetching on links to speed up navigation. Monitoring chunk sizes and network requests helps balance performance.

Connections

HTTP/2 Multiplexing

Builds-on

Understanding HTTP/2 multiplexing helps grasp why many small code chunks can load efficiently in parallel, influencing chunk size decisions in code splitting.

Operating System Virtual Memory Paging

Analogy in mechanism

Just like OS loads memory pages on demand to save resources, code splitting loads code chunks on demand to save bandwidth and speed up apps.

Lazy Evaluation in Functional Programming

Same pattern

Both lazy loading and lazy evaluation delay work until needed, improving efficiency by avoiding unnecessary computation or loading.

Common Pitfalls

#1 Loading all components upfront defeats code splitting benefits.

Wrong approach:

import MyComponent from './MyComponent';
function Page() {
return ;
}

Correct approach:

import React, { lazy, Suspense } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
function Page() {
return Loading...

}>; }

Root cause: Not using React.lazy and Suspense means components load immediately, increasing bundle size and slowing initial load.

#2 Not providing fallback UI causes blank screen during lazy loading.

Wrong approach:

const MyComponent = lazy(() => import('./MyComponent'));
function Page() {
return ;
}

Correct approach:

const MyComponent = lazy(() => import('./MyComponent'));
function Page() {
return Loading...

}>; }

Root cause: Suspense fallback is required to handle loading state; without it React cannot show anything while loading.

#3 Over-splitting code into many tiny chunks causing many network requests.

Wrong approach:

Lazy load every tiny component separately without grouping.

Correct approach:

Lazy load larger logical components or route-level chunks to reduce request overhead.

Root cause:

Misunderstanding chunk size tradeoffs leads to performance degradation from too many requests.