React Code Splitting Tricks
Different Ways of Managing Application Chunks
Modern web apps can be highly complex. They have dozens of pages and hundreds of components. So developers are looking for ways to deliver the application to the browser in parts.
For example, it is not necessary to load all the pages at once to display a site’s home page. It is enough to load the framework and library major files, as well as the home page.
Splitting an application into pieces is known as code splitting, and separate pieces of an application are known as chunks.
Code splitting with react router
Splitting an application into parts is quite easy. To do this, just import pages using dynamic import and react lazy.
And that’s it. When you load the application, in the network tab you will notice that two files are loaded instead of one main.js file.
If we add more pages in the same way, they will not be loaded all at once. Only when we open the corresponding page will each chunk be loaded.
