Maximizing Performance – Lazy Loading and Code Splitting

In order to maximize the performance of a JavaScript application, reducing the amount of unused JavaScript being loaded and interpreted is key. The techniques that can be brought to bear on this problem are called lazy loading and code splitting. Lazy loading and code splitting allows parts of the JavaScript to be loaded on demand as required. This is in contrast to being downloaded on page load and can greatly reduce the amount of unused JavaScript being loaded and interpreted.

We’ll cover the following topics in this chapter:

• The dynamic import syntax and how Vite can automatically code-split based on the syntax
• Route-based code splitting with Next.js and how to read the Bundle Analyzer reports
• How to use next/dynamic and react-intersection-observer to load JavaScript and React components on different user interactions

By the end of this chapter, you’ll be able to identify and...