1
00:00:02,090 --> 00:00:04,110
So which disadvantage do we have.

2
00:00:04,130 --> 00:00:12,440
This is the project we worked on split up into multiple files using D E as six module imports here.

3
00:00:12,440 --> 00:00:20,090
Now let's actually build this project and for that as we did it before we can run NPM start to bring

4
00:00:20,090 --> 00:00:21,980
up that light server.

5
00:00:21,980 --> 00:00:29,840
And of course very important in a new tab all around t is C dash W to start up typescript compilation

6
00:00:29,840 --> 00:00:31,450
in watch mode.

7
00:00:31,460 --> 00:00:38,270
This gives us our project and if we now open the Network tab in the browser developer tools and we reload

8
00:00:38,270 --> 00:00:44,690
this file we will see the disadvantage we have here or the problem we have with this setup.

9
00:00:44,900 --> 00:00:47,460
We see a bunch of HDP requests.

10
00:00:47,510 --> 00:00:49,190
Now you can ignore the last ones here.

11
00:00:49,190 --> 00:00:55,520
These are coming from our development server but all these other requests here to AB J as project input

12
00:00:55,520 --> 00:00:59,660
Jazz Project List jazz bass component jazz and so on.

13
00:00:59,660 --> 00:01:00,990
That's the problem.

14
00:01:01,010 --> 00:01:04,610
You'll notice that all these files are not that large.

15
00:01:04,610 --> 00:01:11,030
They're relatively small so that of course is fine but we have a lot of HDTV requests here.

16
00:01:11,060 --> 00:01:12,650
Now what's the problem with that.

17
00:01:12,650 --> 00:01:17,870
The problem with that can be seen if we have a look at that waterfall here on the right.

18
00:01:17,870 --> 00:01:22,390
Every ATP request that needs to be made of course takes a little time.

19
00:01:22,520 --> 00:01:26,030
It takes time to download the files but since they're not that big.

20
00:01:26,050 --> 00:01:34,760
That's not a issue but every HBP request has like a base overhead a base duration it always takes does

21
00:01:34,760 --> 00:01:38,510
little box you see in front of these graphs here.

22
00:01:38,570 --> 00:01:43,920
That's new at the time it requires the browser to set up that request and send it.

23
00:01:43,970 --> 00:01:50,030
So whilst the actual downloading of the file might be relatively fast setting up the request doing the

24
00:01:50,030 --> 00:01:55,210
work on a server which serves the file ends on that all takes some time.

25
00:01:55,370 --> 00:02:00,320
And now here we have a very fast setup because it's all happening on our machine.

26
00:02:00,320 --> 00:02:05,990
We got a local development server after all if you deployed it to the Web having that many requests

27
00:02:06,170 --> 00:02:12,440
can really introduce a lot of latency and slow down your project just because of the sheer amount of

28
00:02:12,480 --> 00:02:14,800
hp requests made.

29
00:02:14,810 --> 00:02:22,280
So if we can find a solution to reduce that amount of hp requests that would be amazing and that's where

30
00:02:22,280 --> 00:02:24,040
Web Peg comes into play.

31
00:02:24,050 --> 00:02:30,710
You can go to Westpac dot J.S. dot org to learn more about it in the end Westpac is a tool that will

32
00:02:30,710 --> 00:02:38,270
help us bundle our files together and I can really recommend they are extensive and comprehensive documentation

33
00:02:38,270 --> 00:02:40,040
you find on their page.

34
00:02:40,040 --> 00:02:45,470
If you want to learn all about Westpac in this course we'll use some selected features that help us

35
00:02:45,470 --> 00:02:47,480
with typescript.

36
00:02:47,610 --> 00:02:49,890
So what exactly is Westpac.

37
00:02:49,950 --> 00:02:56,220
It's a bundling and you could say build orchestration tool it's a tool that helps us reduce the amount

38
00:02:56,220 --> 00:03:03,240
of hp requests by bundling code together so that we can write code split up across multiple files but

39
00:03:03,240 --> 00:03:09,300
webpage then takes all these files and bundles them together and in addition webpage is capable of doing

40
00:03:09,300 --> 00:03:10,090
more.

41
00:03:10,110 --> 00:03:17,790
It will also optimize our code and it also allows us to add more build steps more build tools for example

42
00:03:17,790 --> 00:03:20,460
to help us with CSX files and so on.

43
00:03:20,460 --> 00:03:25,590
That's not what we'll have a look at in this module though because I want to focus on Westpac and typescript

44
00:03:26,280 --> 00:03:31,770
so let's first of all have a look at our normal setup where we don't use Westpac dare we have multiple

45
00:03:31,770 --> 00:03:38,250
types good files but if we then used these imports we get multiple HBP requests which is not that great

46
00:03:38,250 --> 00:03:40,290
for the reasons I mentioned.

47
00:03:40,290 --> 00:03:47,850
In addition a topic I haven't had a look at before is we also very likely have an optimized code which

48
00:03:47,850 --> 00:03:51,290
means it's not as small as possible.

49
00:03:51,330 --> 00:03:55,670
We can certainly optimize code more by shortening function names and so on.

50
00:03:55,800 --> 00:04:01,650
And of course we want a tool that does this automatically so that we don't have to manually work with

51
00:04:01,980 --> 00:04:03,020
unreadable code.

52
00:04:03,030 --> 00:04:08,010
We want to write perfectly readable code as a developer but it would be great if we had a tool that

53
00:04:08,010 --> 00:04:14,970
then shortens this code and really makes it as small as possible uses as short as possible variable

54
00:04:14,970 --> 00:04:16,260
in function names.

55
00:04:16,260 --> 00:04:22,800
So did we ship as little code as possible because less code means that users can download it faster

56
00:04:22,980 --> 00:04:27,230
which means our application can start up faster on our machines.

57
00:04:27,660 --> 00:04:33,660
And in addition our current setup we have does extra development server light server which is extra

58
00:04:33,660 --> 00:04:36,760
package installed which we have to spin up.

59
00:04:36,930 --> 00:04:42,840
It would be a little bonus a nice bonus if we had one command and that would do everything build our

60
00:04:42,840 --> 00:04:49,230
project but also spin up such a server which automatically reloads our Web site whenever we change a

61
00:04:49,230 --> 00:04:50,700
file in our project.

62
00:04:51,600 --> 00:04:54,320
Well and that's where WEP can help us.

63
00:04:54,360 --> 00:04:57,260
It bundles our code so that we have less imports.

64
00:04:57,270 --> 00:05:04,470
Instead we have some well code bundles that we ship it helps us optimize our code magnify it as it's

65
00:05:04,470 --> 00:05:11,670
called so that we ship less code and our users have less code to download and we can also easily add

66
00:05:11,670 --> 00:05:13,480
more build steps if we want to.

67
00:05:13,590 --> 00:05:19,210
We can add such a development server but we can also do many other things if we really want to.

68
00:05:19,320 --> 00:05:24,890
And the official webpage docs are the place to go if you want to learn all about it was that.

69
00:05:24,990 --> 00:05:30,270
Let's see the example set up in our project and let's learn how we could use Web packed their.