Full Stack Development

Code Splitting



by Tomas Trescak t.trescak@westernsydney.edu.au

Next.js

/

Introduction

  • Slow apps lose users
  • Code splitting : Load only what’s needed
  • Tree shaking : Remove unused code

Next.js

/

Code Splitting

    // App.tsx
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './components/HomePage';

const AdminDashboard = lazy(() => import('./components/AdminDashboard'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={HomePage} /> 
        <Route path="/admin" element={AdminDashboard} /> 
      </Routes>
    </Suspense>
  </Router>
);

export default App;
  • Breaks JS into smaller chunks
  • Based on dynamic imports: import("./path")
  • Use Case : Lazy Loading react components

Next.js

/

Tree Shaking

    // utils.ts
export const formatDate = (date: string): string 
  => new Date(date).toLocaleDateString();
export const sanitizeInput = (input: string): string 
  => input.replace(/<[^>]*>/g, '');

// PostList.tsx
import { formatDate } from './utils';

const PostList: React.FC<PostListProps> = ({ posts }) => (
  <div>
    {posts.map(post => (
      <div key={post.id}>
        <h2>{post.title}</h2>
        <p>Posted on {formatDate(post.date)}</p>
      </div>
    ))}
  </div>
);

export default PostList;
  • Removes unused code
  • Requires ES modules
  • Use Case : Utility functions 
    Before: [██████████] 1.5MB (Homepage + Admin + Unused Code)
After:  [███] 0.4MB (Homepage only, admin lazy-loaded, unused code removed)

Next.js

/

Wrap Up

  • Leverage React.lazy and import() for code splitting.
  • Check your build outputs
  • Avoid side effects and CommonJS imports and libraries