What exactly is Lazy Loading in Angular2?

Question

My understanding of the term "lazy loading" is when I've preciously created a long list but only shown 25 list items at a time. When you scroll down the list the next 25 items are "lazy loaded" via ajax.

But what does lazy loading mean in the context of Angular2?

Isn't the whole application js assets already shipped to the consumer? What does lazy loading actually do, technically speaking?

I can't wrap my head around the benfits beacause all the code is already there, loaded in the consumers browser. What are we gaining by lazy loading components?

All the resources I've found mostly explain how to lazy load. None seem to define exactly what it does from a technical standpoint.

Answer 1

What you mentioned is lazy loading of data.

Lazy loading in Angular is about code. The build tool splits the build output into several files depending on the lazy loading configuration of the router.

Only when components of a lazy loaded module are actually required because a route was selected that has to load such a component, this code file is finally loaded into the browser.

The main benefit is that the initial load (time to first render) is shorter, and if there are parts of your application that are usually not needed by the user, less memory is required in the browser.