Frontend Performance45-70 min
React Code Splitting
Use route-level lazy loading, component-level dynamic imports, and bundle checks to reduce initial JavaScript without breaking navigation.
ReactViteReact RouterSuspense
Prerequisites
- A React app with multiple routes or heavy feature areas.
- A build command that produces chunk sizes.
- A loading component that matches the app UI.
1
Plan the implementation
Start by choosing the exact page, route, API, or deployment surface you want to improve. A narrow target makes the implementation measurable and easier to verify.
- Write down the current behavior and the user-facing problem it creates.
- Pick one measurable success signal such as bundle size, latency, error rate, security coverage, or UI responsiveness.
- Identify the files, routes, providers, and environment variables involved.
- Create a rollback note before changing production-sensitive configuration.
2
Set up the required tools
Install or configure only the tools needed for this implementation. Keep config close to the feature so future developers can find the moving parts quickly.
Implementation snippet
npm run build
# Review the generated chunk table in the terminal output.Checklist
- Dependencies are added to the correct workspace package.
- Environment variables are documented in `.env.example` when needed.
- Local development still starts without production-only secrets.
- The change is small enough to review in one pull request.
3
Implement the core pattern
- Find routes that are not needed for the first page view.
- Move those route imports from static imports to `lazy()` imports.
- Wrap route rendering with `Suspense` and a stable loading state.
- Split especially heavy widgets such as charts, editors, maps, and media players.
- Rebuild and compare the initial chunk size before and after.
Implementation snippet
import { lazy, Suspense } from "react";
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));
export function AppRoutes() {
return (
<Suspense fallback={<PageLoader />}>
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</Suspense>
);
}4
Handle edge cases
Checklist
- The home route does not import dashboard-only libraries.
- Loading states do not shift layout dramatically.
- Error boundaries exist around lazy-loaded feature areas.
- Chunk names and cache behavior are acceptable for production.
5
Verify before production
- Run the app locally and test the normal success path.
- Test one failure path, one empty state, and one slow-network or retry path.
- Run the project build and any related unit or integration tests.
- Check browser console, server logs, and network responses for hidden warnings.
- Document the final behavior, commands used, and any follow-up work.