As web apps grow in their capabilities, we also see an increase in their bundle sizes. At one hand we need to ship more code for cool new features. On the other hand, we also need third party libraries and their code for everything to work.

The result? Huge initial bundle size and hence, more load times. This in turn will lead to more users turning away from your app and consequently a loss in business. Code splitting is a useful technique to deal with this problem.

What is code splitting?

“Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel.”

In other words, you divide your application into smaller bundles and keep your initial bundle size as small as possible. The bundle for a feature then is downloaded when the user needs it. Another word used for this is lazy loading.

In this article, I’m going to cover three ways to code split your Angular application — at the level of module, component or package.

#coding #web-development #angular #javascript