MENU

Code Splitting

Build tools such as Create React App (now deprecated) or its modern successor, Vite, use a bundler (Webpack, Rollup, or esbuild) under the hood to bundle all your '.js' files into one minimized, obfuscated '.js' file by following your 'import' statements. The single bundle file can then be included in your HTML file.

However, as the size of your bundle file grows, this can slow down loading, since everything is always loaded at once. To make loading more efficient, you should split the bundle file and load only the necessary libraries. There are three ways to do this: dynamic ECMAScript import(), React.lazy(), and the loadable-components library.