So which disadvantage do we have.
This is the project we worked on split up into multiple files using D E as six module imports here.
Now let's actually build this project and for that as we did it before we can run NPM start to bring
up that light server.
And of course very important in a new tab all around t is C dash W to start up typescript compilation
in watch mode.
This gives us our project and if we now open the Network tab in the browser developer tools and we reload
this file we will see the disadvantage we have here or the problem we have with this setup.
We see a bunch of HDP requests.
Now you can ignore the last ones here.
These are coming from our development server but all these other requests here to AB J as project input
Jazz Project List jazz bass component jazz and so on.
That's the problem.
You'll notice that all these files are not that large.
They're relatively small so that of course is fine but we have a lot of HDTV requests here.
Now what's the problem with that.
The problem with that can be seen if we have a look at that waterfall here on the right.
Every ATP request that needs to be made of course takes a little time.
It takes time to download the files but since they're not that big.
That's not a issue but every HBP request has like a base overhead a base duration it always takes does
little box you see in front of these graphs here.
That's new at the time it requires the browser to set up that request and send it.
So whilst the actual downloading of the file might be relatively fast setting up the request doing the
work on a server which serves the file ends on that all takes some time.
And now here we have a very fast setup because it's all happening on our machine.
We got a local development server after all if you deployed it to the Web having that many requests
can really introduce a lot of latency and slow down your project just because of the sheer amount of
hp requests made.
So if we can find a solution to reduce that amount of hp requests that would be amazing and that's where
Web Peg comes into play.
You can go to Westpac dot J.S. dot org to learn more about it in the end Westpac is a tool that will
help us bundle our files together and I can really recommend they are extensive and comprehensive documentation
you find on their page.
If you want to learn all about Westpac in this course we'll use some selected features that help us
with typescript.
So what exactly is Westpac.
It's a bundling and you could say build orchestration tool it's a tool that helps us reduce the amount
of hp requests by bundling code together so that we can write code split up across multiple files but
webpage then takes all these files and bundles them together and in addition webpage is capable of doing
more.
It will also optimize our code and it also allows us to add more build steps more build tools for example
to help us with CSX files and so on.
That's not what we'll have a look at in this module though because I want to focus on Westpac and typescript
so let's first of all have a look at our normal setup where we don't use Westpac dare we have multiple
types good files but if we then used these imports we get multiple HBP requests which is not that great
for the reasons I mentioned.
In addition a topic I haven't had a look at before is we also very likely have an optimized code which
means it's not as small as possible.
We can certainly optimize code more by shortening function names and so on.
And of course we want a tool that does this automatically so that we don't have to manually work with
unreadable code.
We want to write perfectly readable code as a developer but it would be great if we had a tool that
then shortens this code and really makes it as small as possible uses as short as possible variable
in function names.
So did we ship as little code as possible because less code means that users can download it faster
which means our application can start up faster on our machines.
And in addition our current setup we have does extra development server light server which is extra
package installed which we have to spin up.
It would be a little bonus a nice bonus if we had one command and that would do everything build our
project but also spin up such a server which automatically reloads our Web site whenever we change a
file in our project.
Well and that's where WEP can help us.
It bundles our code so that we have less imports.
Instead we have some well code bundles that we ship it helps us optimize our code magnify it as it's
called so that we ship less code and our users have less code to download and we can also easily add
more build steps if we want to.
We can add such a development server but we can also do many other things if we really want to.
And the official webpage docs are the place to go if you want to learn all about it was that.
Let's see the example set up in our project and let's learn how we could use Web packed their.