Implementing Dynamic Bundle Splitting with React and React Router

Bundle splitting is a crucial optimization technique in modern React applications. It involves breaking down your application's code into smaller chunks that are loaded on demand, improving initial load time and overall performance. This challenge focuses on implementing dynamic bundle splitting using React Router v6 and React.lazy to load components asynchronously.

Problem Description

You are tasked with creating a React application with multiple routes. Instead of loading all components upfront, you need to implement dynamic bundle splitting so that components are only loaded when the corresponding route is visited. This will significantly reduce the initial bundle size and improve the user experience.

What needs to be achieved:

• Create a React application with at least three routes: /, /about, and /contact.
• Each route should display a different component.
• Implement dynamic bundle splitting using React.lazy and React.Suspense for the /about and /contact components. The / route should be loaded synchronously.
• Use React Router v6 for navigation.

Key Requirements:

• The /about and /contact components should be loaded asynchronously only when the user navigates to those routes.
• A loading indicator (e.g., a simple spinner) should be displayed while the components are being loaded.
• The application should handle potential errors during component loading gracefully.

Expected Behavior:

• When the application initially loads, only the / component should be loaded.
• When the user navigates to /about, the About component should be loaded asynchronously, displaying a loading indicator in the meantime.
• Similarly, when the user navigates to /contact, the Contact component should be loaded asynchronously with a loading indicator.
• If there's an error loading either component, an error message should be displayed.

Edge Cases to Consider:

• Network errors during component loading.
• Component dependencies failing to load.
• Handling fallback UI in case of loading failures.

Examples

Example 1:

Input: User navigates to '/' initially.
Output: The '/' component is rendered immediately. No loading indicator is shown.
Explanation: The '/' component is loaded synchronously.

Example 2:

Input: User navigates to '/about'.
Output: A loading indicator is displayed. After a short delay (simulating network latency), the 'About' component is rendered.
Explanation: The 'About' component is loaded asynchronously using React.lazy and React.Suspense.

Example 3:

Input: Network error occurs while loading '/contact'.
Output: An error message is displayed indicating that the 'Contact' component failed to load. The loading indicator disappears.
Explanation: The error boundary within Suspense catches the error and displays a fallback UI.

Constraints

• React Version: React 18 or higher.
• React Router Version: React Router v6.
• TypeScript: The solution must be written in TypeScript.
• Bundle Size: The initial bundle size should be noticeably smaller than if all components were loaded upfront. While precise measurement isn't required, the goal is to demonstrate the principle of bundle splitting.
• Loading Indicator: A simple loading indicator (e.g., a spinning circle or text) is required. The visual design is not a primary concern.

Notes

• Consider using a simple Suspense boundary to handle loading states and errors.
• React.lazy takes a function that returns a promise resolving to a module with a default export containing the component.
• Think about how to handle errors gracefully when a component fails to load. Error boundaries are a good approach.
• Focus on demonstrating the core concept of dynamic bundle splitting rather than creating a fully production-ready application. Styling and complex error handling are not the primary focus.
• You can use any UI library for the loading indicator, but keep it simple.