1
00:00:02,290 --> 00:00:03,670
So let's dive into our code

2
00:00:03,690 --> 00:00:07,980
and as I mentioned multiple times, let's test it under production circumstances.

3
00:00:07,980 --> 00:00:16,390
So here in my terminal in the editor, I'll run npm run build prod and this will build it for production.

4
00:00:16,460 --> 00:00:20,980
Now the problem we have with that of course is that now we build this

5
00:00:20,980 --> 00:00:23,550
but now we have no running dev server.

6
00:00:23,590 --> 00:00:29,980
Now we can of course use a development server like serve which we used earlier and manually navigate into

7
00:00:29,980 --> 00:00:35,350
the dist folder and then run serve there if you still got that installed to run that but it's not the approach

8
00:00:35,350 --> 00:00:37,090
I want to use, instead here 

9
00:00:37,090 --> 00:00:44,230
I will tweak the webpack.config.js file and set my mode here to production actually, to make sure

10
00:00:44,230 --> 00:00:48,960
that this is optimized and we do have our production environment

11
00:00:49,120 --> 00:00:57,430
but at the same time I want to make sure that we use a dev tool that gives us source maps so that in

12
00:00:57,430 --> 00:01:04,000
the browser dev tools we can map our optimized code back to the original code, which doesn't bloat our

13
00:01:04,000 --> 00:01:09,600
code because most source maps when you add them to your code, they also affect the size of the code

14
00:01:09,640 --> 00:01:15,640
but thankfully webpack also has an option we can choose here which gives us a source map with all the

15
00:01:15,640 --> 00:01:19,120
features we need without affecting our code size,

16
00:01:19,150 --> 00:01:22,690
it just takes a bit longer to generate it but here, that's not a problem,

17
00:01:22,780 --> 00:01:24,160
we got time.

18
00:01:24,160 --> 00:01:30,180
So what we want to use here is now just source map.

19
00:01:30,210 --> 00:01:36,120
Now if we run npm run build dev again, we're using this configuration which now I actually built for

20
00:01:36,120 --> 00:01:42,930
production or simulates production but which also uses a dev server and gives us source maps so that

21
00:01:42,930 --> 00:01:49,770
when we analyze our code in the dev tools, we can still find out which parts of our original code are responsible

22
00:01:49,770 --> 00:01:56,760
for that. So now with that, back here in our application if we go to the network tab and we clear everything

23
00:01:56,760 --> 00:01:58,290
there and we reload,

24
00:01:58,290 --> 00:02:02,610
we see now shop.js is much smaller as you can tell.

25
00:02:02,670 --> 00:02:09,780
Now I will say it's still not exactly on the same level as the fully optimized code, just to quickly

26
00:02:09,780 --> 00:02:16,260
also show that, if I would run npm run build prod to use my other webpack config where I also

27
00:02:16,260 --> 00:02:22,500
build for production but where I use a better source map which is smaller and doesn't add anything to

28
00:02:22,500 --> 00:02:28,800
the files or almost not anything, if we use that and we then go into the dist folder and there I use that

29
00:02:28,800 --> 00:02:31,700
serve package which we installed earlier in the course,

30
00:02:32,010 --> 00:02:39,020
if I now visit the server, the host spun up by this serve development server and there we inspect

31
00:02:39,020 --> 00:02:42,590
the network tab, you see we only have 9kb.

32
00:02:42,590 --> 00:02:46,920
So this is actually what we will have in the end once we ship this to a server,

33
00:02:47,000 --> 00:02:52,460
it's also gzipped, so compressed by our server we're using here and therefore it's even smaller.

34
00:02:52,490 --> 00:02:57,200
That is something you set up on the server side though, so that's such a server side configuration optimization

35
00:02:57,200 --> 00:03:04,430
I was talking about and you'll find an article, a text lecture with more resources on how to configure

36
00:03:04,430 --> 00:03:09,520
your server and what you might want to keep in mind there later in this module.

37
00:03:09,530 --> 00:03:13,180
Still for our purposes here, this should be fine,

38
00:03:13,190 --> 00:03:20,540
using this in-between solution, though if you want to do it perfectly, you would actually use the real

39
00:03:20,540 --> 00:03:23,450
production build but then you don't have source maps,

40
00:03:23,450 --> 00:03:29,600
so if we would use cheap source map here in the other webpack config file, we should achieve something

41
00:03:29,690 --> 00:03:35,030
similar, we still might have some overhead because of our webpack dev server but it should be closer

42
00:03:35,030 --> 00:03:41,620
to the final size but debugging or finding problems in our code would then be harder.

43
00:03:41,670 --> 00:03:47,540
So I will go for this in-between approach and run npm run build dev with this adjusted webpack config

44
00:03:47,720 --> 00:03:50,990
which is closer to the production result.

45
00:03:51,200 --> 00:03:55,550
So here, we got this size here which is okay

46
00:03:55,580 --> 00:04:01,640
and now with that, let's in general find out how we can analyze this app and improve our code.