Code splitting is an awesome feature of webpack that can be used to split your code into smaller bundles and can be loaded when necessary or in parallel. If this feature is used properly it can have a very huge impact on the performance improvement of your application. You can look more into code splitting here in the official webpack documentation.
\nSuppose you are loading a library we use an import statement on the top of your file telling our code that some dependency is needed. The example below shows how an import works.
/**\n * Before code splitting\n */\nimport { Average } from \"./mathLibrary.js\"\n\nconsole.log(Average([0, 1, 4, 3, 2]))The sad part is all import statements have to be written on the top of your file. This creates a problem that all dependencies will be loaded at the beginning itself increasing the load time.
In React we can handle this a bit differently. We can load that code only when required. This is called code splitting. The example above can be written with code splitting as follows.
\n/**\n * After code splitting\n */\nimport(\"./mathLibrary.js\").then(math =>\n console.log(math.Average([0, 1, 4, 3, 2]))\n)When webpack comes across this code it automatically starts code splitting.
\nSuppose we want to do a code splitting for a component in React we do it with React.lazy API.\nThe example below shows how to make a component Lazy loaded.
/**\n * Lazy load the component\n */\nconst AuthComponent = React.lazy(() => import(\"./auth\"))The component will be loaded only when it will be needed from the server.
\nSuppose we are using a lazy-loaded component we need to wrap it with React.Suspense.
React 16.6 added a <Suspense> component that lets you “wait” for some code to load and declaratively specify a loader or some skeleton while we’re waiting. React.Suspense is just like the Error boundaries which we use for our React apps.
/**\n* Lazy load the component\n*/\nconst AuthComponent = React.lazy(() => import('./auth'))\n\nfunction App () {\n <React.Suspense fallback={<div>loading...</div>}>\n <AuthComponent/>\n <React.Suspense>\n}When the <AuthComponent/> is loaded from the server loading... is displayed till it's finished loading the component.
It can be very tricky to decide when to perform code splitting in an application. Some of the most common use cases I can think of is
\nLet us see how to use Code splitting on page routes.
\n/**\n* Lazy load the component\n*/\nimport React, { Component, Suspense } from 'react'\nimport Loading from './Loading'\n\nimport {\n BrowserRouter as Router,\n Route,\n Link,\n} from 'react-router-dom'\n\nconst LazyHome = React.lazy(() => import('./Home'))\nconst LazyPage1 = React.lazy(() => import('./Page1'))\nconst LazyPage2 = React.lazy(() => import('./Page2'))\n\nconst App = (){\n return (\n <Router>\n <div>\n <Suspense fallback={<Loading />}>\n <Route exact path='/' component={LazyHome} />\n <Route path='/page1' component={LazyPage1} />\n <Route path='/pag2' component={LazyPage2} />\n </Suspense>\n </div>\n </Router>\n )\n}\n\nexport default App;The above code will split the bundle into smaller blocks and load the piece of code when necessary. For example LazyPage1 will be loaded only when you navigate to /page1. This will effectively reduce the load time of the application.