{"id":372705,"date":"2023-03-24T12:34:37","date_gmt":"2023-03-24T12:34:37","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=372705"},"modified":"2025-02-20T11:33:32","modified_gmt":"2025-02-20T11:33:32","slug":"implementation-of-code-splitting-in-react-js","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/","title":{"rendered":"Implementation of Code Splitting in React Js"},"content":{"rendered":"\n

Hello, Today We are going to learn how we can reduce the load time of our created Js bundle via Webpack\/Rollup\/browserify, etc. from split our bundle code into various parts.<\/p>\n\n\n\n

Why We Need This?<\/strong><\/p>\n\n\n\n

If you\u2019re using Create React App<\/a>, Next.js<\/a>, Gatsby<\/a>, or a similar tool, you will have a Webpack setup out of the box to bundle your app. <\/p>\n\n\n\n

Which creates a bundle file and that bundle file may have large third-party libraries js which is not even required on the home page, that may take a long time to load. <\/p>\n\n\n\n

With\u00a0react native app development<\/a>, we can also create cross-platform mobile applications that deliver a native-like experience, all while sharing a single codebase for both iOS and Android platforms.<\/p>\n\n\n\n

Here our code-splitting provides the solution for this problem. Hope you understand the requirement of splitting.<\/p>\n\n\n\n

Code Splitting in React Js<\/strong><\/p>\n\n\n\n

Bundling is great, but as your app grows, your bundle will grow too. Especially if you are including large third-party libraries. <\/p>\n\n\n\n

You need to keep an eye on the code you are including in your bundle so that you don\u2019t accidentally make it so large that your app takes a long time to load.<\/p>\n\n\n\n

Code splitting will “lazy-load<\/strong>” your component or routing. which can dramatically improve the performance of your app. <\/p>\n\n\n\n

Here We are not removing the code from the app. we are just loading when it is required (We are loading lazily).<\/p>\n\n\n\n

React.lazy<\/strong><\/code><\/p>\n\n\n\n

This will allow you to render dynamic import as a regular component.<\/p>\n\n\n\n

Code Now :<\/p>\n\n\n\n

import FirstComponent from '.\/FirstComponent';<\/pre>\n\n\n\n
After Code Splitting :<\/p>\n\n\n\n
const FirstComponent = React.lazy(() => import('.\/FirstComponent'));<\/pre>\n\n\n\n
OR<\/p>\n\n\n\n
import { lazy } from 'react';\nconst FirstComponent = lazy(() => import('.\/FirstComponent'));<\/pre>\n\n\n\n
This will automatically load the bundle containing the FirstComponent<\/code> when this component is first rendered.<\/p>\n\n\n\n
Now This Lazy component will be called the Suspense Component. This Suspense Component will allow us to show some content until our lazy Component Bundle doesn’t call.<\/p>\n\n\n\n
import { Suspense, lazy } from 'react';\n\nconst FirstComponent = lazy(() => import('.\/FirstComponent'));\n\nfunction MyComponent() {\n  return (\n    <div>\n      <Suspense fallback={<div>Loading...<\/div>}>\n        <FirstComponent \/>\n      <\/Suspense>\n    <\/div>\n  );\n}<\/pre>\n\n\n\n
This fallback prop can accept any React element you want to render, now Loading msg will render until our <FirstComponent \/><\/strong> will not load.<\/p>\n\n\n\n
You can also render multiple Components under the Suspense.<\/p>\n\n\n\n
import { Suspense, lazy } from 'react';\n\nconst FirstComponent = lazy(() => import('.\/FirstComponent'));\nconst SecondComponent = lazy(() => import('.\/SecondComponent'));\n\nfunction MyComponent() {\n  return (\n    <div>\n      <Suspense fallback={<div>Loading...<\/div>}>\n        <FirstComponent \/>\n        <SecondComponent \/>\n      <\/Suspense>\n    <\/div>\n  );\n}<\/pre>\n\n\n\n
Route-based code splitting<\/strong> :<\/p>\n\n\n\n
A good place to start is with routes. Most people on the web are used to page transitions taking some amount of time to load. <\/p>\n\n\n\n
You also tend to be re-rendering the entire page at once so your users are unlikely to be interacting with other elements on the page at the same time. <\/p>\n\n\n\n
Here you can use any transition in the Suspense fallback prop.<\/p>\n\n\n\n
import { Suspense, lazy } from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\n\nconst Home = lazy(() => import('.\/routes\/Home'));\nconst About = lazy(() => import('.\/routes\/About'));\n\nconst App = () => (\n  <Router>\n    <Suspense fallback={<div>Loading...<\/div>}>\n      <Routes>\n        <Route path="\/" element={<Home \/>} \/>\n        <Route path="\/about" element={<About \/>} \/>\n      <\/Routes>\n    <\/Suspense>\n  <\/Router>\n);<\/pre>\n\n\n\n
Named Exports<\/strong><\/p>\n\n\n\n
React.lazy<\/code> currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default.<\/p>\n\n\n\n
\/\/ ManyComponents.js\nexport const MyComponent = \/* your code here *\/;\nexport const MyUnusedComponent = \/* your code here *\/;<\/pre>\n\n\n\n
\/\/ MyComponent.js\nexport { MyComponent as default } from ".\/ManyComponents.js";<\/pre>\n\n\n\n
\/\/ MyApp.js\nimport React, { lazy } from 'react';\nconst MyComponent = lazy(() => import(".\/MyComponent.js"));<\/pre>\n\n\n\n
Name Your Chunks<\/strong> <\/p>\n\n\n\n
If you want to create the split code with separate names. here you can easily achieve that with this.<\/p>\n\n\n\n
import React, { lazy } from 'react';\nconst MyComponent = lazy( () =>\n\timport( \/* webpackChunkName: "myComponent" *\/ '.\/MyComponent.js' )\n);<\/pre>\n\n\n\n
This way Code Splitting may also be achieved if you are using Webpack.<\/p>\n\n\n\n
Also, you can contact us for Hire React Native App Developers<\/a> to build fast, reliable cross-platform apps.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hello, Today We are going to learn how we can reduce the load time of our created Js bundle via Webpack\/Rollup\/browserify, etc. from split our bundle code into various parts. Why We Need This? If you\u2019re using Create React App, Next.js, Gatsby, or a similar tool, you will have a Webpack setup out of the box to bundle […]<\/a><\/p>\n","protected":false},"author":340,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7966,1260],"tags":[],"class_list":["post-372705","post","type-post","status-publish","format-standard","hentry","category-wordpress-woocommerce","category-wordpress"],"yoast_head":"\nImplementation of Code Splitting in React Js - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Here We are not removing the code from the app. we are just loading when it is required (We are loading lazily).\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implementation of Code Splitting in React Js - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Here We are not removing the code from the app. we are just loading when it is required (We are loading lazily).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-24T12:34:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-20T11:33:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Himanshu Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Himanshu Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/\"},\"author\":{\"name\":\"Himanshu Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/6952f25eb0d1843071cf1334ea1b07ed\"},\"headline\":\"Implementation of Code Splitting in React Js\",\"datePublished\":\"2023-03-24T12:34:37+00:00\",\"dateModified\":\"2025-02-20T11:33:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/\"},\"wordCount\":495,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"articleSection\":[\"WooCommerce\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/\",\"url\":\"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/\",\"name\":\"Implementation of Code Splitting in React Js - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2023-03-24T12:34:37+00:00\",\"dateModified\":\"2025-02-20T11:33:32+00:00\",\"description\":\"Here We are not removing the code from the app. we are just loading when it is required (We are loading lazily).\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Implementation of Code Splitting in React Js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/6952f25eb0d1843071cf1334ea1b07ed\",\"name\":\"Himanshu Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3d19c09b89f420fac0217dbdff8be9b28ce99b04c3a1bce23c0652b5b880c5d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3d19c09b89f420fac0217dbdff8be9b28ce99b04c3a1bce23c0652b5b880c5d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Himanshu Kumar\"},\"description\":\"Himanshu Kumar, a skilled professional in the WordPress department, specializes in React, React Native, Redux, and WooCommerce API Development. His expertise in PoS App Development, Chat Server integration, and Payment Methods for PoS systems ensures seamless and innovative eCommerce solutions.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/himanshu-kumar731\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Implementation of Code Splitting in React Js - Webkul Blog","description":"Here We are not removing the code from the app. we are just loading when it is required (We are loading lazily).","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/","og_locale":"en_US","og_type":"article","og_title":"Implementation of Code Splitting in React Js - Webkul Blog","og_description":"Here We are not removing the code from the app. we are just loading when it is required (We are loading lazily).","og_url":"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-03-24T12:34:37+00:00","article_modified_time":"2025-02-20T11:33:32+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Himanshu Kumar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Himanshu Kumar","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/"},"author":{"name":"Himanshu Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/6952f25eb0d1843071cf1334ea1b07ed"},"headline":"Implementation of Code Splitting in React Js","datePublished":"2023-03-24T12:34:37+00:00","dateModified":"2025-02-20T11:33:32+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/"},"wordCount":495,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"articleSection":["WooCommerce","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/","url":"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/","name":"Implementation of Code Splitting in React Js - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2023-03-24T12:34:37+00:00","dateModified":"2025-02-20T11:33:32+00:00","description":"Here We are not removing the code from the app. we are just loading when it is required (We are loading lazily).","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/implementation-of-code-splitting-in-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Implementation of Code Splitting in React Js"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/6952f25eb0d1843071cf1334ea1b07ed","name":"Himanshu Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3d19c09b89f420fac0217dbdff8be9b28ce99b04c3a1bce23c0652b5b880c5d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3d19c09b89f420fac0217dbdff8be9b28ce99b04c3a1bce23c0652b5b880c5d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Himanshu Kumar"},"description":"Himanshu Kumar, a skilled professional in the WordPress department, specializes in React, React Native, Redux, and WooCommerce API Development. His expertise in PoS App Development, Chat Server integration, and Payment Methods for PoS systems ensures seamless and innovative eCommerce solutions.","url":"https:\/\/webkul.com\/blog\/author\/himanshu-kumar731\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/372705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/340"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=372705"}],"version-history":[{"count":9,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/372705\/revisions"}],"predecessor-version":[{"id":483688,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/372705\/revisions\/483688"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=372705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=372705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=372705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}