Introduction
Explore how code splitting enhances the performance of React applications by breaking down large bundles into smaller chunks. Understand the role of bundlers like Webpack and the use of dynamic import syntax to load components lazily, reducing initial load times and improving user experience.
We'll cover the following...
These tools ensure that all files and imports are later bundled into a single large file that can be deployed simply without worrying about relative links between files. This process is referred to as bundling. A bundle can easily grow and reach the size of a megabyte or more, especially if many third-party libraries are used. Large bundles create significant performance problems, because they take browsers longer to process, download, and execute.
Code-splitting
To combat and counteract large bundles, a technique called code-splitting is used. Code-splitting defines the process in which we separate our application into many smaller bundles, which are all able to run on their own, and load further bundles if necessary. A common separation is either splitting by dependencies (for example React or ReactDOM), or having a bundle per route.
Dynamic import syntax
One of the simplest ways to make use of code splitting is to use dynamic import syntax. It’s currently in discussion at TC39 and is therefore in the process of being standardized, but Babel and Webpack enable us to make use of code-splitting today. It is necessary to install the babel
plugin @babel/plugin-syntax-dynamic-import to make use of code splitting. Create React App as well as next.js and Gatsby support code splitting out of the box and do not need to be configured to allow it.