🚀 What is Code Splitting in MERN?
Code Splitting means breaking your application into smaller chunks so the user doesn't have to download everything at once.
Benefits:
⚡ Faster load time
📉 Smaller initial bundle
🚀 Only load what the user needs
🔥 Better UX & SEO (for CSR apps)
✅ 1. Code Splitting in React (Frontend)
React supports dynamic import(), and this is the most common place where code splitting is used.
🔹 A. Using React.lazy (Most Common)
Example:
import React, { Suspense } from "react";
const Dashboard = React.lazy(() => import("./pages/Dashboard"));
const Profile = React.lazy(() => import("./pages/Profile"));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<Router>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/profile" element={<Profile />} />
</Router>
</Suspense>
);
}
export default App;
✔ What this does:
Dashboard and Profile are loaded only when the user visits that route.
Your main bundle becomes much smaller.
🔹 B. Route-Level Splitting with React Router (Recommended)
If you use React Router v6:
import { lazy, Suspense } from "react";
import { Routes, Route } from "react-router-dom";
const Home = lazy(() => import("./pages/Home"));
const Login = lazy(() => import("./pages/Login"));
function App() {
return (
<Suspense fallback={<h2>Loading...</h2>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
</Routes>
</Suspense>
);
}
✔ This gives:
Route-based chunking
Faster load time
Automatic splitting by Webpack/Vite
🔹 C. Component-Level Splitting
Load heavy components only when needed:
const Chart = React.lazy(() => import("./components/Chart"));
function Dashboard() {
return (
<Suspense fallback={<div>Loading chart...</div>}>
<Chart />
</Suspense>
);
}
Useful when:
Using big chart libraries (Recharts, D3, Chart.js)
Using modals, editors, maps, etc.
✅ 2. Code Splitting in Express / Node (Backend)
Backend splitting is usually done using dynamic imports or modular routes.
🔹 A. Route-level Code Splitting (Dynamic import() in Node)
If using ES modules:
app.get("/users", async (req, res) => {
const usersController = await import("./controllers/usersController.js");
usersController.default(req, res);
});
✔ This loads the controller only when needed.
🔹 B. Splitting Express Routes by Folder
routes/users.js
import express from "express";
const router = express.Router();
router.get("/", (req, res) => {
res.json({ msg: "Users Route" });
});
export default router;
server.js
import usersRoute from "./routes/users.js";
app.use("/users", usersRoute);
✔ Makes backend modular
✔ Easier to maintain
✔ Faster server startup for large apps
🔹 C. Using Worker Threads or Child Processes for Heavy Tasks
For CPU-heavy operations:
import { Worker } from "worker_threads";
app.get("/heavy-task", (req, res) => {
const worker = new Worker("./workers/heavy.js");
worker.on("message", result => res.send(result));
});
This is a kind of "task splitting".
⚡ 3. Code Splitting Best Practices in MERN
✔ Frontend
Split routes (React.lazy)
Split heavy components (charts, editors)
Avoid loading admin panels in main bundle
Use Vite or Webpack 5 for automatic chunking
Prefetch critical chunks
✔ Backend
Split API routes
Lazy load controllers
Use workers for CPU-heavy tasks
Keep reusable code modular
🧪 Example: Full MERN Code Splitting Folder Structure
/client
/src
/pages
Home.jsx
Login.jsx
Dashboard.jsx
/components
Chart.jsx
App.jsx
index.js
/server
/routes
users.js
products.js
/controllers
usersController.js
productsController.js
server.js
Learn MERN Stack Training in Hyderabad
Read More
Building a Fraud Detection Pipeline with Spark MLlib on Dataproc
Running TensorFlow Distributed Training on Dataproc
Using GraphFrames on Spark for Network Analysis
Visit Our Quality Thought Training Institute in Hyderabad
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments