Andrew's Digital Garden

Code splitting

Developers usually split their applications into multiple pages that can be accessed from different URLs. Each of these pages becomes a unique entry point into the application. Code-splitting is the process of splitting the application’s bundle into smaller chunks required by each entry point. The goal is to improve the application's initial load time by only loading the code required to run that page.

If you don't use code splitting, users have to download the entire app bundle regardless of what they're using. This means any bloat to the app bundle affects every visitor.

Tools like [[nextjs]] do this automatically on the pages/ route - 'route based splitting'.

[[webpack]] can do this through different methods, including 'entry points' configuration', and [[dynamic imports]].

[[buildtooling]] [[deployment]] [[performance]] [[rendering]]

Code splitting