Code-splitting with React Loadable and webpack

The best option to increase the efficiency of our application is to introduce code-splitting to our React code. It allows us to send the user only the parts of our code that are needed to view or render the current page. Everything else is excluded, and will be dynamically fetched from the server while the user navigates through our application. The aim of this section is to generate a bundle that's specific to every page or component that we use.

We will begin by installing a few packages that we need to implement this technique. Install them using npm, as follows:

npm install --save-dev @babel/plugin-syntax-dynamic-import babel-plugin-dynamic-import-node webpack-node-externals @babel/plugin-transform-runtime ...

Get Hands-On Full-Stack Web Development with GraphQL and React now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.