1
00:00:02,350 --> 00:00:07,570
So a lot of optimization was applied, as mentioned before feel free to apply more.

2
00:00:07,570 --> 00:00:12,760
There's one we can definitely introduce though, something I didn't do earlier because I wanted to finish

3
00:00:12,760 --> 00:00:17,940
this application first but now it's time to optimize the way we load our routes,

4
00:00:17,950 --> 00:00:19,680
we can use lazy loading there.

5
00:00:19,720 --> 00:00:21,670
Let's have a look at our app.js file,

6
00:00:21,880 --> 00:00:28,720
we have the checkout route and the orders route and both are not necessarily visited by us,

7
00:00:28,720 --> 00:00:30,580
we might never go to the checkout,

8
00:00:30,580 --> 00:00:32,870
we might never wisit the orders area.

9
00:00:33,220 --> 00:00:37,760
Now the auth part maybe also never gets visited,

10
00:00:37,840 --> 00:00:41,720
we can load them all asynchronously, lazily.

11
00:00:42,120 --> 00:00:43,750
The burger builder, not so much,

12
00:00:43,750 --> 00:00:48,200
that's our root page, we always visit that but the other routes, for sure.

13
00:00:48,250 --> 00:00:52,810
Now you learned how you can implement lazy loading with the react router,

14
00:00:52,930 --> 00:00:55,330
feel free to add it on your own,

15
00:00:55,330 --> 00:01:00,670
I'll give you a short pause to pause the video and try this on your own and then we'll definitely do

16
00:01:00,670 --> 00:01:03,280
this together and make sure that we load

17
00:01:03,280 --> 00:01:06,060
checkout, orders and auth only when we need them.

18
00:01:10,090 --> 00:01:11,490
So were are you successful?

19
00:01:11,500 --> 00:01:13,190
Let's try it together, I'll

20
00:01:13,270 --> 00:01:23,720
first of all add my a higher order component, async component and in there the AsyncComponent.js file, l

21
00:01:23,770 --> 00:01:31,870
paste in the code I wrote in the routing section, so this asyncComponent function which takes a function

22
00:01:31,870 --> 00:01:34,730
as an input which it then executes down here,

23
00:01:34,780 --> 00:01:40,660
this function will use this dynamic import syntax and then give us a promise where we eventually get

24
00:01:40,660 --> 00:01:43,950
the component we want it to load and where we then render this component.

25
00:01:43,960 --> 00:01:47,120
That's what we're doing here, let's save this file and let's now

26
00:01:47,130 --> 00:01:50,600
use it in the app.js file to load some components lazily.

27
00:01:50,840 --> 00:02:00,520
So for that, I'll import AsyncComponent from and now I need to go into my hoc folder, AsyncComponent

28
00:02:00,550 --> 00:02:02,410
and load it from that file there

29
00:02:02,800 --> 00:02:11,090
and then I want to set up some components to be loaded lazily, the asyncCheckout for example, I'll name

30
00:02:11,090 --> 00:02:15,480
this constant asyncCheckout and I'll use AsyncComponent here.

31
00:02:15,540 --> 00:02:22,510
Now we need to pass an argument to asyncComponent and that argument should be a function so I'll pass

32
00:02:22,570 --> 00:02:27,500
a function here, a function which will eventually return

33
00:02:27,500 --> 00:02:34,520
this import statement as a function where we then can define the path to the component we want to load lazily,

34
00:02:34,520 --> 00:02:37,820
of course that's our checkout container in this case, with that

35
00:02:37,850 --> 00:02:38,860
we can get rid of

36
00:02:38,870 --> 00:02:40,410
checkout here.

37
00:02:40,460 --> 00:02:44,410
Now let's replicate this twice for orders and auth,

38
00:02:44,570 --> 00:02:52,490
so we have the asyncOrders here too where I will of course take the path from the old orders import and

39
00:02:52,490 --> 00:02:59,340
load that lazily and then we can remove the original orders import and now the same for auth, here I'll

40
00:02:59,350 --> 00:03:00,440
name this asyncAuth,

41
00:03:00,470 --> 00:03:08,750
take the path from the old auth import and of course replace that down here, then we can get

42
00:03:08,750 --> 00:03:11,070
rid of the auth import here too.

43
00:03:11,090 --> 00:03:13,360
Now we get all these async components,

44
00:03:13,400 --> 00:03:14,470
let's now use them.

45
00:03:14,570 --> 00:03:22,510
So here we'll have asyncCheckout, for asyncAuth or excuse me, for auth, we're going to add asyncAuth

46
00:03:22,730 --> 00:03:29,360
and for the old orders component, we're going to add asyncOrders. And now all that data, all these components

47
00:03:29,720 --> 00:03:31,570
are loaded only when needed.

48
00:03:31,790 --> 00:03:33,410
So let's save everything,

49
00:03:33,680 --> 00:03:39,720
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

50
00:03:39,720 --> 00:03:40,420
it,

51
00:03:40,430 --> 00:03:46,220
I open the network tabs so that we can see any network requests and we should see one when I click on

52
00:03:46,250 --> 00:03:47,450
authenticate,

53
00:03:47,450 --> 00:03:48,340
indeed, we load.

54
00:03:48,380 --> 00:03:48,780
chunk 2.

55
00:03:48,780 --> 00:03:56,970
Now if I do sign in here, submit, I'm back to burger builder.

56
00:03:57,010 --> 00:04:01,560
If I reload the app, I should still be signed in automatically so this is still working.

57
00:04:01,570 --> 00:04:05,200
Now let's visit orders and we download chunk 3

58
00:04:05,200 --> 00:04:13,030
with the orders code and now finally, let's build a burger to see if we also load the checkout

59
00:04:13,030 --> 00:04:14,450
part lazily.

60
00:04:14,530 --> 00:04:16,840
Let's click continue and we download.

61
00:04:16,840 --> 00:04:17,680
chunk 1

62
00:04:17,710 --> 00:04:19,770
which is the checkout related code.

63
00:04:19,960 --> 00:04:26,710
And with that, we improved our application because we now only load the code we need to load and don't

64
00:04:26,710 --> 00:04:28,910
load any unnecessary code.

65
00:04:29,110 --> 00:04:35,530
That is a great improvement and one important step before we actually build our application for production

66
00:04:35,620 --> 00:04:40,430
though as I also mentioned in the routing module, lazy loading is not always better.

67
00:04:40,510 --> 00:04:46,390
If the lazily loaded modules are very small, as they are in our app to be honest, you might not really gain

68
00:04:46,420 --> 00:04:48,540
anything from adding lazy loading.

69
00:04:48,550 --> 00:04:54,430
Still I want to show it because it is an important concept and something you should consider in optimizing

70
00:04:54,520 --> 00:04:56,230
any application you build.