In this example, the MyComponent module is loaded on demand using dynamic import(). The lazy() function creates a new component that loads the module when it is needed. The Suspense component is used to show a loading message while the module is being loaded.<\/p>\n
Implementing React code splitting using webpack bundler<\/h3>\n
Another method for code splitting in React is using the webpack bundler, which is the default bundler for Create React App. webpack supports a feature called “code splitting” that allows you to split your code into smaller chunks. You can configure webpack to split your code based on different criteria, such as entry points or routes.<\/p>\n
Here is an example of how code splitting can be configured in webpack:<\/p>\n
const path = require('path');\r\n\r\nmodule.exports = {\r\nentry: {\r\nmain: '.\/src\/index.js',\r\n},\r\noutput: {\r\nfilename: '[name].[contenthash].js',\r\npath: path.resolve(__dirname, 'dist'),\r\nclean: true,\r\n},\r\noptimization: {\r\nsplitChunks: {\r\nchunks: 'all',\r\n},\r\n},\r\n};<\/pre>\nIn this example, webpack is configured to split the code based on all chunks. This means that webpack will automatically split the code into smaller chunks based on the dependencies between the modules.<\/p>\n
Route-based code splitting<\/h3>\n
Route-based code splitting is a technique used in modern web development to optimize the performance of web applications. It involves breaking down large codebases into smaller, more manageable chunks.<\/p>\n
Route-based code splitting solves this problem by allowing developers to divide the application into smaller pieces.
\nFor example, if the user navigates to a page that requires a specific module or component, that module or component is loaded dynamically without the need to load the entire application codebase.<\/p>\n
const { lazy, Suspense } = React;\r\nconst { BrowserRouter: Router, Switch, Route, Link } = ReactRouterDOM;\r\n\r\nconst HomePage = lazy(() => import('.\/components\/HomePage'));\r\nconst AboutPage = lazy(() => import('.\/components\/AboutPage'));\r\nconst ContactPage = lazy(() => import('.\/components\/ContactPage'));\r\n\r\nfunction App() {\r\nreturn (\r\n<Router>\r\n<div>\r\n<nav>\r\n<ul>\r\n<li><Link to=\"\/\">Home<\/Link><\/li>\r\n<li><Link to=\"\/about\">About<\/Link><\/li>\r\n<li><Link to=\"\/contact\">Contact<\/Link><\/li>\r\n<\/ul>\r\n<\/nav>\r\n<Suspense fallback={<div>Loading...<\/div>}>\r\n<Switch>\r\n<Route exact path=\"\/\" component={HomePage} \/>\r\n<Route path=\"\/about\" component={AboutPage} \/>\r\n<Route path=\"\/contact\" component={ContactPage} \/>\r\n<\/Switch>\r\n<\/Suspense>\r\n<\/div>\r\n<\/Router>\r\n);\r\n}\r\n\r\nReactDOM.render(<App \/>, document.getElementById('root'));<\/pre>\n![\"route](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/rout-based-code-splitting.png\")
<\/a><\/p>\n