So a lot of optimization was applied, as mentioned before feel free to apply more.
There's one we can definitely introduce though, something I didn't do earlier because I wanted to finish
this application first but now it's time to optimize the way we load our routes,
we can use lazy loading there.
Let's have a look at our app.js file,
we have the checkout route and the orders route and both are not necessarily visited by us,
we might never go to the checkout,
we might never wisit the orders area.
Now the auth part maybe also never gets visited,
we can load them all asynchronously, lazily.
The burger builder, not so much,
that's our root page, we always visit that but the other routes, for sure.
Now you learned how you can implement lazy loading with the react router,
feel free to add it on your own,
I'll give you a short pause to pause the video and try this on your own and then we'll definitely do
this together and make sure that we load
checkout, orders and auth only when we need them.
So were are you successful?
Let's try it together, I'll
first of all add my a higher order component, async component and in there the AsyncComponent.js file, l
paste in the code I wrote in the routing section, so this asyncComponent function which takes a function
as an input which it then executes down here,
this function will use this dynamic import syntax and then give us a promise where we eventually get
the component we want it to load and where we then render this component.
That's what we're doing here, let's save this file and let's now
use it in the app.js file to load some components lazily.
So for that, I'll import AsyncComponent from and now I need to go into my hoc folder, AsyncComponent
and load it from that file there
and then I want to set up some components to be loaded lazily, the asyncCheckout for example, I'll name
this constant asyncCheckout and I'll use AsyncComponent here.
Now we need to pass an argument to asyncComponent and that argument should be a function so I'll pass
a function here, a function which will eventually return
this import statement as a function where we then can define the path to the component we want to load lazily,
of course that's our checkout container in this case, with that
we can get rid of
checkout here.
Now let's replicate this twice for orders and auth,
so we have the asyncOrders here too where I will of course take the path from the old orders import and
load that lazily and then we can remove the original orders import and now the same for auth, here I'll
name this asyncAuth,
take the path from the old auth import and of course replace that down here, then we can get
rid of the auth import here too.
Now we get all these async components,
let's now use them.
So here we'll have asyncCheckout, for asyncAuth or excuse me, for auth, we're going to add asyncAuth
and for the old orders component, we're going to add asyncOrders. And now all that data, all these components
are loaded only when needed.
So let's save everything,
let's go back to our application and let's have a look at the application and see if it works as we would expect
it,
I open the network tabs so that we can see any network requests and we should see one when I click on
authenticate,
indeed, we load.
chunk 2.
Now if I do sign in here, submit, I'm back to burger builder.
If I reload the app, I should still be signed in automatically so this is still working.
Now let's visit orders and we download chunk 3
with the orders code and now finally, let's build a burger to see if we also load the checkout
part lazily.
Let's click continue and we download.
chunk 1
which is the checkout related code.
And with that, we improved our application because we now only load the code we need to load and don't
load any unnecessary code.
That is a great improvement and one important step before we actually build our application for production
though as I also mentioned in the routing module, lazy loading is not always better.
If the lazily loaded modules are very small, as they are in our app to be honest, you might not really gain
anything from adding lazy loading.
Still I want to show it because it is an important concept and something you should consider in optimizing
any application you build.