All profiling done uses the same settings:

• “Fast 3G” throttled network speed.
• Desktop resolution.
• Disabled HTTP cache.
• Logged-in, to an account with 16 tracked TV shows.

We need a baseline that we can compare results against!

The page we’ll be testing is the main logged-in Summary view. it’s the most data-heavy page, and so it offers the most room for optimization.

The Summary view contains a set of cards, like this:

Here’s our baseline profile, on 3G speed. It’s… not great.

First Meaningful Paint: ~5000ms
First image loaded: ~6500ms
All requests finished: >15,000ms

Oof. The page doesn’t display anything useful until ~5 seconds in. The first image only finishes loading around 6.5 seconds, and it takes

We can lazy load this small form so that it only shows up when someone either clicks to edit an item, or clicks “Add New Hero”. Both of those actions show the edit form.

First I am going to add a spot in my state for this “EditForm” component to live.

class Heroes extends Component {
 constructor(props) {
 super(props);
 this.state = { 
 ..., 
 lazyEditHero: null 
 }
 }

 ...,

 render() { 
 return ( 
 ...
 )
 }
}

I put mine in a property called lazyEditHero, but you can call it whatever you like. Naming things is hard and there is a 100% chance you will regret it later anyway no matter what you do.

Next, we need to actually load this component in whenever someone selects “Add New Hero” or selects an existing hero to edit it. Then we’ll set the component reference in our state so we can use it later in our JSX. I have put this in a function called

With lazy loaded modules in Angular, it’s easy to have features loaded only when the user navigates to their routes for the first time. This can be a huge help for your app’s performance and reducing the initial bundle size. Plus, it’s pretty straight-forward to setup!

The following covers lazy loading modules in Angular 2+ apps.

Lazy loaded routes need to be outside of the root app module, so you’ll want to have your lazy loaded features into feature modules.

Assuming that you have an Angular CLI project, let’s create a new feature module:

$ ng g module shop

Now let’s also create 3 components inside our