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 ...
