1
00:00:00,120 --> 00:00:05,460
In this lecture, we will explore one of the most powerful features for boosting the performance of

2
00:00:05,460 --> 00:00:06,000
your app.

3
00:00:06,360 --> 00:00:09,030
I'm referring to a feature called Lazy Loading.

4
00:00:09,360 --> 00:00:14,250
Applications are made up of hundreds of files, but do we need to load these files?

5
00:00:14,550 --> 00:00:20,490
The user may need to download a few files for a page by loading code the user doesn't need.

6
00:00:20,790 --> 00:00:22,860
We're delaying the page load time.

7
00:00:23,220 --> 00:00:26,370
We should only load the code the user needs right now.

8
00:00:26,640 --> 00:00:29,850
Lazy loading is a feature for addressing this problem.

9
00:00:30,090 --> 00:00:32,610
We can break our application into chunks.

10
00:00:33,090 --> 00:00:37,620
Processing and application is done with a library called Web Pack.

11
00:00:37,950 --> 00:00:41,130
The angular Seelye configures this tool for us.

12
00:00:41,430 --> 00:00:45,450
It's not common for developers to worry about optimizing web pack.

13
00:00:45,840 --> 00:00:48,690
The idea of a chunk is a web pack feature.

14
00:00:48,990 --> 00:00:52,470
It's a fancy word to describe the pieces of your application.

15
00:00:52,800 --> 00:00:58,200
By default, Web Pack will bundle your file into as few files as possible.

16
00:00:58,740 --> 00:01:04,560
We can override this behavior by manually telling Web Pack to keep a chunk out of the bundle, while

17
00:01:04,560 --> 00:01:07,620
at the same time load the chunk when it is needed.

18
00:01:08,010 --> 00:01:13,350
Ultimately, it's a file that doesn't get downloaded by our app on initialization.

19
00:01:13,710 --> 00:01:17,250
The file gets downloaded when we instruct Web Pack to load it.

20
00:01:17,670 --> 00:01:20,490
Overall, this is known as lazy loading.

21
00:01:21,650 --> 00:01:24,020
Implementing lazy loading is easy.

22
00:01:24,230 --> 00:01:27,620
We are going to lazy load the video feature of our app.

23
00:01:28,040 --> 00:01:31,430
Not all users will upload or manage clips on our app.

24
00:01:31,760 --> 00:01:35,690
Some users may just want to watch clips uploaded by their friends.

25
00:01:35,960 --> 00:01:38,540
We should lazy load the video features.

26
00:01:38,810 --> 00:01:42,650
Luckily, we outsourced the code into a separate module.

27
00:01:43,130 --> 00:01:46,130
We can lazy load the entire video module.

28
00:01:46,310 --> 00:01:49,100
The question is when should we load this module?

29
00:01:49,370 --> 00:01:54,050
We can load this module when the user visits the manage or upload pages.

30
00:01:54,320 --> 00:01:55,340
Let's get started.

31
00:01:55,640 --> 00:01:58,520
Open the app routing module in your editor.

32
00:02:01,130 --> 00:02:06,340
Inside the roots array, let's add a new object before the not found roots.

33
00:02:08,780 --> 00:02:13,730
Inside the object and the path property with a value of an empty string.

34
00:02:16,380 --> 00:02:23,310
The path property will have an impact on our routes, angular will depend on the path from this object

35
00:02:23,310 --> 00:02:26,040
with the routes in the video routing module.

36
00:02:26,400 --> 00:02:27,840
Let me elaborate further.

37
00:02:28,080 --> 00:02:31,200
At the moment, the current path is an empty string.

38
00:02:31,590 --> 00:02:36,300
We have two routes in the video routing module called Manage and Upload.

39
00:02:36,720 --> 00:02:43,140
Angular will append the path from the app routing module with the paths from the video routing modules.

40
00:02:43,620 --> 00:02:49,920
For example, let's say we wanted to centralize all paths under a path called dashboard.

41
00:02:52,580 --> 00:03:00,260
The managed path would become dashboard slash manage, the upload path would become dashboard slash

42
00:03:00,290 --> 00:03:00,950
upload.

43
00:03:01,460 --> 00:03:06,920
You can think of the path and this object as the base path for the paths in the child module.

44
00:03:07,340 --> 00:03:11,060
Otherwise, we would need to update the links in our components.

45
00:03:11,300 --> 00:03:13,730
I'm going to leave it as an empty string.

46
00:03:14,450 --> 00:03:17,270
Next, we need to lazy load the module.

47
00:03:17,570 --> 00:03:21,860
Typically, we would add big component property to load a component.

48
00:03:22,160 --> 00:03:26,360
Alternatively, we can define a property called load children.

49
00:03:29,020 --> 00:03:35,800
This property can be used to load a module dynamically loading a module is an asynchronous operation.

50
00:03:36,130 --> 00:03:38,410
You know me, I like to use async.

51
00:03:38,410 --> 00:03:39,490
Await syntax.

52
00:03:39,730 --> 00:03:41,730
Define an asynchronous function.

53
00:03:44,300 --> 00:03:50,480
From this function, we must return the module, we can import files with the import function.

54
00:03:50,810 --> 00:03:57,860
The path to the module is the following dot slash video slash video Typekit module.

55
00:04:00,390 --> 00:04:04,350
This function is asynchronous, so add the await keyword.

56
00:04:06,850 --> 00:04:09,130
Next, Angular wants the module.

57
00:04:09,310 --> 00:04:11,620
Let's look inside the video module.

58
00:04:14,150 --> 00:04:18,769
You might have noticed this already, but Angular doesn't like default exports.

59
00:04:19,070 --> 00:04:21,350
Everything is exported under a name.

60
00:04:21,740 --> 00:04:30,260
The video module class is a named export web pack isn't aware of the types of values exported by a module.

61
00:04:30,590 --> 00:04:37,260
We need to explicitly tell Webpack where to find the module class back in the app routing module.

62
00:04:37,460 --> 00:04:40,160
Ramp the return value with parentheses.

63
00:04:41,930 --> 00:04:45,200
Next, return the video module object.

64
00:04:47,710 --> 00:04:53,650
We're finished a recap, we're chilling, angular to load this module when the user visits the paths

65
00:04:53,650 --> 00:04:54,700
from this module.

66
00:04:55,090 --> 00:04:57,580
There's one more modification we need to make.

67
00:04:57,880 --> 00:05:01,330
We don't need to import this module from the app module.

68
00:05:01,660 --> 00:05:03,550
Open this file in your editor.

69
00:05:05,940 --> 00:05:10,380
Next, remove the references to the video module from this file.

70
00:05:14,800 --> 00:05:21,010
Let's try testing the app in your browser, open the home page with the developer tools opened.

71
00:05:21,340 --> 00:05:27,400
We're going to focus our attention on the network panel of the developer tools under this panel.

72
00:05:27,520 --> 00:05:30,550
Let's filter the request by JavaScript files.

73
00:05:33,090 --> 00:05:39,540
The file sizes are large, this build size is to be expected since we haven't built the project for

74
00:05:39,540 --> 00:05:40,200
production.

75
00:05:40,560 --> 00:05:41,580
Don't be alarmed.

76
00:05:41,820 --> 00:05:43,110
It's completely normal.

77
00:05:43,380 --> 00:05:48,540
Once we build the project for production, the build is going to be optimized for hosting.

78
00:05:48,840 --> 00:05:52,110
Let's navigate to the manage or upload pages.

79
00:05:54,620 --> 00:05:57,770
After doing so, a new file has been downloaded.

80
00:05:58,190 --> 00:06:01,370
This file is the chunk I was referring to earlier.

81
00:06:01,700 --> 00:06:07,910
We've outsourced the logic for these two pages in a separate file by doing lazy loading.

82
00:06:07,910 --> 00:06:12,060
The other pages are going to load slightly faster if you want.

83
00:06:12,230 --> 00:06:18,620
You can take this solution a step further by placing every page into a separate module and lazy load

84
00:06:18,620 --> 00:06:18,950
them.

85
00:06:19,370 --> 00:06:22,460
The more you lazy load, the faster your app will load.

86
00:06:22,970 --> 00:06:26,090
It's a simple way of boosting the performance of your app.

87
00:06:26,360 --> 00:06:30,770
For now, I think lazy loading the video module will suffice.