1
00:00:02,000 --> 00:00:05,000
So now that we did add environment variables

2
00:00:05,000 --> 00:00:08,000
before we get to deployment,

3
00:00:08,000 --> 00:00:11,000
it's time to do a test build on our local machine

4
00:00:11,000 --> 00:00:13,000
and see if we're happy.

5
00:00:13,000 --> 00:00:16,000
And for this, I opened the terminal again.

6
00:00:16,000 --> 00:00:18,000
and now when I wanna run this build command

7
00:00:18,000 --> 00:00:22,000
which builds our application for production.

8
00:00:22,000 --> 00:00:24,000
And if you run NPM run build

9
00:00:24,000 --> 00:00:27,000
this production optimized build is being produced.

10
00:00:27,000 --> 00:00:31,000
And we also get useful information shown to us here.

11
00:00:31,000 --> 00:00:36,000
We see, for example, which pages are built for the server,

12
00:00:36,000 --> 00:00:39,000
which pages are 100% static,

13
00:00:39,000 --> 00:00:41,000
this with the empty.here

14
00:00:41,000 --> 00:00:43,000
and which pages are dynamic

15
00:00:43,000 --> 00:00:46,000
but were statically pre-generated.

16
00:00:46,000 --> 00:00:49,000
And we see that output here and that's all looking good.

17
00:00:49,000 --> 00:00:52,000
We got the starting page pre-generated,

18
00:00:52,000 --> 00:00:56,000
our 404 was added for us automatically.

19
00:00:56,000 --> 00:00:58,000
Contact page is 100% static

20
00:00:58,000 --> 00:01:01,000
because we don't fetch any dynamic data here.

21
00:01:01,000 --> 00:01:05,000
And then we got posts and deposed detail pages,

22
00:01:05,000 --> 00:01:07,000
which were also pre-generated.

23
00:01:08,000 --> 00:01:10,000
But here we see an issue.

24
00:01:10,000 --> 00:01:14,000
This is red because this posts detailed page.

25
00:01:14,000 --> 00:01:17,000
These pages are too big,

26
00:01:17,000 --> 00:01:20,000
they contain too much JavaScript.

27
00:01:20,000 --> 00:01:23,000
We could deploy it, it wouldn't break

28
00:01:23,000 --> 00:01:25,000
but this is a clear indicator

29
00:01:25,000 --> 00:01:28,000
that we might be doing something in those pages

30
00:01:28,000 --> 00:01:30,000
which is not optimal.

31
00:01:30,000 --> 00:01:33,000
We might be shipping too much code.

32
00:01:33,000 --> 00:01:34,000
And very often that means

33
00:01:34,000 --> 00:01:37,000
that you're using some third party package,

34
00:01:37,000 --> 00:01:40,000
some third party library that is too big.

35
00:01:40,000 --> 00:01:43,000
So therefore, before we deploy something,

36
00:01:43,000 --> 00:01:45,000
let's fix this issue.

37
00:01:45,000 --> 00:01:49,000
And for this, let's have a look at the detail page.

38
00:01:49,000 --> 00:01:52,000
Now this slag page here is certainly not too big.

39
00:01:52,000 --> 00:01:55,000
It doesn't have a lot of code.

40
00:01:55,000 --> 00:01:58,000
We also can ignore any code,

41
00:01:58,000 --> 00:02:02,000
which is only needed in getStaticProps or getStaticPaths.

42
00:02:02,000 --> 00:02:06,000
That code will only execute during the build process

43
00:02:06,000 --> 00:02:08,000
and on the server anyways.

44
00:02:08,000 --> 00:02:11,000
That will never end up on the client

45
00:02:11,000 --> 00:02:16,000
and the code here this size refers to the client side code.

46
00:02:17,000 --> 00:02:19,000
So we can't ignore the server side code.

47
00:02:19,000 --> 00:02:21,000
So this component should be fine.

48
00:02:21,000 --> 00:02:24,000
Therefore, let's explore the post content component.

49
00:02:25,000 --> 00:02:29,000
Here, we all don't have too much code on our own

50
00:02:29,000 --> 00:02:33,000
but we are using a couple of third party packages

51
00:02:33,000 --> 00:02:37,000
react markdown, and this syntax highlighter.

52
00:02:38,000 --> 00:02:41,000
And now you would have to dig into those packages

53
00:02:41,000 --> 00:02:44,000
and find out how big they are.

54
00:02:44,000 --> 00:02:47,000
And I can tell you that our problem here

55
00:02:47,000 --> 00:02:49,000
is react syntax highlighter.

56
00:02:49,000 --> 00:02:52,000
This is huge.

57
00:02:52,000 --> 00:02:57,000
If you visit the react syntax highlighter GitHub repository,

58
00:02:57,000 --> 00:02:58,000
then you actually find out

59
00:02:58,000 --> 00:03:01,000
that they tell you that it's quite big

60
00:03:01,000 --> 00:03:04,000
and that they offer a light build

61
00:03:04,000 --> 00:03:07,000
because the react syntax highlighter

62
00:03:07,000 --> 00:03:09,000
can have a very large footprint.

63
00:03:11,000 --> 00:03:14,000
But the solution is simple, we can use the light build

64
00:03:14,000 --> 00:03:17,000
basically as it is described down there.

65
00:03:17,000 --> 00:03:19,000
The difference between the light version

66
00:03:19,000 --> 00:03:21,000
and the version we're currently using

67
00:03:21,000 --> 00:03:24,000
is that this version out of the box

68
00:03:24,000 --> 00:03:26,000
supports syntax highlighting

69
00:03:26,000 --> 00:03:30,000
for all possible programming languages.

70
00:03:30,000 --> 00:03:33,000
That might sound nice, but it is quite redundant

71
00:03:33,000 --> 00:03:36,000
and it adds a lot of JavaScript code.

72
00:03:36,000 --> 00:03:38,000
In reality,

73
00:03:38,000 --> 00:03:43,000
we are probably not going to include C++ code snippets here

74
00:03:43,000 --> 00:03:47,000
if we are blogging about web development.

75
00:03:47,000 --> 00:03:49,000
And hence using the light build

76
00:03:49,000 --> 00:03:53,000
and explicitly stating the languages we wanna support

77
00:03:53,000 --> 00:03:55,000
is probably the better choice here.

78
00:03:55,000 --> 00:03:57,000
And that's what we can do.

79
00:03:57,000 --> 00:04:02,000
We can also import the styling in a slightly optimized way.

80
00:04:03,000 --> 00:04:08,000
So therefore what I'll do here is I'll import PrismLight

81
00:04:08,000 --> 00:04:11,000
as Syntax Highlighter, instead of prism

82
00:04:12,000 --> 00:04:15,000
and I'll import my styles differently

83
00:04:15,000 --> 00:04:19,000
by diving into style/prism/atom-dark

84
00:04:19,000 --> 00:04:23,000
and then importing atomDark like this.

85
00:04:23,000 --> 00:04:26,000
This will also only import that style then

86
00:04:26,000 --> 00:04:27,000
and no other styles.

87
00:04:28,000 --> 00:04:30,000
And now we need to import the languages

88
00:04:30,000 --> 00:04:32,000
which we wanna support.

89
00:04:32,000 --> 00:04:34,000
And we do this by importing

90
00:04:34,000 --> 00:04:39,000
from react-syntax-highlighter/ dist/cjs/languages/prism/

91
00:04:43,000 --> 00:04:45,000
and then we have different options

92
00:04:45,000 --> 00:04:47,000
like JavaScript for example.

93
00:04:48,000 --> 00:04:53,000
And then we could import this as js, whatever you want.

94
00:04:54,000 --> 00:04:56,000
And we could, of course also duplicate this.

95
00:04:56,000 --> 00:04:57,000
And for example,

96
00:04:57,000 --> 00:05:02,000
all the import css if we wanna support this as well.

97
00:05:02,000 --> 00:05:04,000
And you can simply add all the languages

98
00:05:04,000 --> 00:05:06,000
you wanna support.

99
00:05:06,000 --> 00:05:08,000
So all the languages which you'll use

100
00:05:08,000 --> 00:05:10,000
in your code snippets typically.

101
00:05:11,000 --> 00:05:14,000
Then you just need to register those languages

102
00:05:14,000 --> 00:05:18,000
simply by calling SyntaxHighlighter.registerLanguage

103
00:05:18,000 --> 00:05:23,000
and then the identifier, for example js

104
00:05:23,000 --> 00:05:24,000
that's the identifier

105
00:05:24,000 --> 00:05:28,000
which I also use in my markdown code here.

106
00:05:29,000 --> 00:05:32,000
So we need to import that identifier.

107
00:05:34,000 --> 00:05:38,000
And then as a second argument, that imported language

108
00:05:39,000 --> 00:05:43,000
and I'll repeat that for css here.

109
00:05:43,000 --> 00:05:47,000
And with that, we should have a much lighter footprint.

110
00:05:48,000 --> 00:05:52,000
If we now run NPM run build again

111
00:05:52,000 --> 00:05:56,000
with those changes applied, it will build our site again

112
00:05:56,000 --> 00:05:59,000
and produce all those files again.

113
00:05:59,000 --> 00:06:03,000
And now we'll see that this is much smaller.

114
00:06:03,000 --> 00:06:08,000
It shrank from 320 kilobytes to 114 kilobytes.

115
00:06:09,000 --> 00:06:11,000
And it's also worth noting

116
00:06:11,000 --> 00:06:15,000
that these sizes are before compression,

117
00:06:15,000 --> 00:06:18,000
but Node.js will compress these files.

118
00:06:18,000 --> 00:06:22,000
So once they are served, they are much smaller

119
00:06:22,000 --> 00:06:24,000
and therefore that should be fine.

120
00:06:24,000 --> 00:06:27,000
Now let's also test if that looks good though.

121
00:06:27,000 --> 00:06:29,000
So let's start the def server

122
00:06:29,000 --> 00:06:32,000
to see if our change has broke something

123
00:06:32,000 --> 00:06:34,000
and go to Posts,

124
00:06:34,000 --> 00:06:37,000
and then that post, which has that code snippet

125
00:06:37,000 --> 00:06:40,000
and that still looks all right here if we have a look at it.

126
00:06:41,000 --> 00:06:43,000
So that is working.

127
00:06:43,000 --> 00:06:45,000
Now we have that syntax highlighting

128
00:06:45,000 --> 00:06:48,000
but with a smaller footprint.

129
00:06:48,000 --> 00:06:51,000
And that's why checks like this are important

130
00:06:51,000 --> 00:06:54,000
and why you should always validate your code

131
00:06:54,000 --> 00:06:56,000
and see if you can improve it.

132
00:06:56,000 --> 00:07:00,000
And even here you might find over third-party packages

133
00:07:00,000 --> 00:07:02,000
which have a even smaller footprint.

134
00:07:02,000 --> 00:07:06,000
You might find different ways of highlighting syntax.

135
00:07:06,000 --> 00:07:10,000
There might still be ways of improving these even more

136
00:07:10,000 --> 00:07:11,000
but we already gained a lot here

137
00:07:11,000 --> 00:07:14,000
and we now have a size that's okay.

138
00:07:14,000 --> 00:07:16,000
And therefore now with that,

139
00:07:16,000 --> 00:07:19,000
I think we're ready to actually deploy this.