WEBVTT

1
00:00:04.955 --> 00:00:07.335
<00:00:04.955>So <00:00:05.110>today <00:00:05.266>I <00:00:05.421>wanna <00:00:05.577>talk <00:00:05.732>to <00:00:05.888>you <00:00:06.043>about <00:00:06.199>practical <00:00:06.355>steps

2
00:00:07.335 --> 00:00:10.255
<00:00:07.335>that <00:00:07.510>you <00:00:07.685>can <00:00:07.859>do <00:00:08.035>to <00:00:08.210>reduce <00:00:08.385>your <00:00:08.560>bundle <00:00:08.735>size.

3
00:00:11.315 --> 00:00:13.375
<00:00:11.315>But <00:00:11.490>before <00:00:11.665>I <00:00:11.840>jump <00:00:12.014>into <00:00:12.190>that, <00:00:12.364>lemme <00:00:12.540>just <00:00:12.715>say,

4
00:00:13.605 --> 00:00:16.255
<00:00:13.605>give <00:00:13.721>you <00:00:13.838>a <00:00:13.955>little <00:00:14.071>bit <00:00:14.188>of <00:00:14.305>background <00:00:14.421>of <00:00:14.538>I <00:00:14.655>guess <00:00:14.771>who <00:00:14.888>I <00:00:15.005>am

5
00:00:16.275 --> 00:00:18.615
<00:00:16.274>and <00:00:16.415>how <00:00:16.555>I've <00:00:16.695>come <00:00:16.834>to <00:00:16.974>give <00:00:17.115>this <00:00:17.255>talk <00:00:17.395>to <00:00:17.534>you <00:00:17.674>today.

6
00:00:19.475 --> 00:00:21.895
<00:00:19.475>So <00:00:19.630>I've <00:00:19.786>got <00:00:19.941>about <00:00:20.097>10 <00:00:20.252>years <00:00:20.408>in <00:00:20.563>the <00:00:20.719>financial <00:00:20.875>industry

7
00:00:22.035 --> 00:00:26.175
<00:00:22.035>and <00:00:22.151>then <00:00:22.268>about <00:00:22.385>four <00:00:22.501>years <00:00:22.618>ago <00:00:22.735>I <00:00:22.851>moved <00:00:22.968>to <00:00:23.085>work <00:00:23.201>at <00:00:23.318>Ag <00:00:23.435>Grid.

8
00:00:26.325 --> 00:00:28.415
<00:00:26.325>I've <00:00:26.605>got <00:00:26.884>a <00:00:27.165>wife, <00:00:27.445>four <00:00:27.724>kids

9
00:00:28.435 --> 00:00:30.655
<00:00:28.435>and <00:00:28.668>two <00:00:28.901>very <00:00:29.134>cute <00:00:29.368>fluffy <00:00:29.601>dogs <00:00:29.834>who

10
00:00:31.255 --> 00:00:33.135
<00:00:31.255>I <00:00:31.410>think <00:00:31.566>are <00:00:31.721>looking <00:00:31.877>forward <00:00:32.032>to <00:00:32.188>me <00:00:32.343>getting <00:00:32.499>back <00:00:32.655>home.

11
00:00:35.075 --> 00:00:36.215
<00:00:35.075>If <00:00:35.246>you <00:00:35.417>haven't <00:00:35.588>heard <00:00:35.759>of <00:00:35.930>Ag <00:00:36.101>Grid

12
00:00:36.215 --> 00:00:38.615
<00:00:36.215>or <00:00:36.370>ag <00:00:36.526>charts, <00:00:36.681>these <00:00:36.837>are <00:00:36.992>the <00:00:37.148>products <00:00:37.303>that <00:00:37.459>we <00:00:37.615>um,

13
00:00:38.885 --> 00:00:40.895
<00:00:38.885>that <00:00:39.085>we <00:00:39.285>build <00:00:39.485>and <00:00:39.684>that <00:00:39.885>we, <00:00:40.085>we <00:00:40.285>ship.

14
00:00:41.155 --> 00:00:43.735
<00:00:41.155>So <00:00:41.355>Ag <00:00:41.555>grid <00:00:41.755>is <00:00:41.955>a <00:00:42.155>data <00:00:42.355>table <00:00:42.555>component.

15
00:00:44.195 --> 00:00:46.375
<00:00:44.195>So <00:00:44.370>whenever <00:00:44.545>you <00:00:44.720>want <00:00:44.895>to <00:00:45.070>display <00:00:45.245>lots <00:00:45.420>of <00:00:45.595>data,

16
00:00:46.745 --> 00:00:49.455
<00:00:46.745>group <00:00:46.885>it <00:00:47.025>sort <00:00:47.165>it, <00:00:47.305>filter <00:00:47.445>it, <00:00:47.584>all <00:00:47.724>these <00:00:47.864>kind <00:00:48.004>of <00:00:48.144>features,

17
00:00:49.995 --> 00:00:51.575
<00:00:49.995>you <00:00:50.228>can <00:00:50.461>just <00:00:50.695>drop <00:00:50.928>our <00:00:51.161>component <00:00:51.394>in.

18
00:00:51.635 --> 00:00:54.975
<00:00:51.635>We <00:00:51.809>support <00:00:51.985>React, <00:00:52.160>angular <00:00:52.335>view <00:00:52.510>or <00:00:52.684>just <00:00:52.860>vanilla <00:00:53.035>JavaScript.

19
00:00:55.355 --> 00:00:58.135
<00:00:55.355>And <00:00:55.510>we've <00:00:55.666>also <00:00:55.821>got <00:00:55.977>a <00:00:56.132>really <00:00:56.288>comprehensive <00:00:56.443>set <00:00:56.599>of <00:00:56.754>charts

20
00:00:58.135 --> 00:01:00.695
<00:00:58.135>as <00:00:58.335>well <00:00:58.535>which <00:00:58.735>integrate <00:00:58.934>perfectly <00:00:59.135>with <00:00:59.335>the <00:00:59.535>grid,

21
00:01:00.955 --> 00:01:04.215
<00:01:00.955>giving <00:01:01.110>you <00:01:01.266>Excel <00:01:01.421>like <00:01:01.577>features, <00:01:01.732>select <00:01:01.888>a <00:01:02.043>range <00:01:02.199>of <00:01:02.355>data,

22
00:01:04.345 --> 00:01:05.975
<00:01:04.345>chart <00:01:04.694>it <00:01:05.045>and <00:01:05.394>do <00:01:05.745>it.

23
00:01:05.975 --> 00:01:08.095
<00:01:05.975>So <00:01:06.115>these <00:01:06.255>are <00:01:06.395>the <00:01:06.535>kind <00:01:06.675>of <00:01:06.815>things <00:01:06.955>that <00:01:07.095>we're <00:01:07.235>working <00:01:07.375>on.

24
00:01:08.715 --> 00:01:11.295
<00:01:08.715>And <00:01:08.890>today <00:01:09.065>I <00:01:09.240>wanna <00:01:09.415>share <00:01:09.590>some <00:01:09.765>of <00:01:09.940>the <00:01:10.115>things

25
00:01:11.295 --> 00:01:13.415
<00:01:11.295>that <00:01:11.470>we've <00:01:11.645>learned <00:01:11.820>in <00:01:11.995>terms <00:01:12.170>of <00:01:12.345>building <00:01:12.520>these <00:01:12.695>components

26
00:01:13.875 --> 00:01:17.055
<00:01:13.875>and <00:01:14.015>the <00:01:14.155>steps <00:01:14.295>you <00:01:14.435>can <00:01:14.575>data <00:01:14.715>to <00:01:14.855>shrink <00:01:14.995>them <00:01:15.135>as <00:01:15.275>well.

27
00:01:19.155 --> 00:01:21.415
<00:01:19.155>So <00:01:19.282>I <00:01:19.409>guess <00:01:19.536>the <00:01:19.664>question <00:01:19.791>is, <00:01:19.918>well <00:01:20.045>why <00:01:20.173>do <00:01:20.300>we <00:01:20.427>actually <00:01:20.555>want

28
00:01:21.415 --> 00:01:22.615
<00:01:21.414>to <00:01:21.684>reduce <00:01:21.955>the <00:01:22.225>bundle <00:01:22.494>size?

29
00:01:22.875 --> 00:01:24.415
<00:01:22.875>And <00:01:23.073>this <00:01:23.271>comes <00:01:23.469>down <00:01:23.667>to <00:01:23.865>a <00:01:24.062>few <00:01:24.261>things.

30
00:01:24.915 --> 00:01:27.055
<00:01:24.914>Faster <00:01:25.264>load <00:01:25.615>times, <00:01:25.964>you <00:01:26.315>know,

31
00:01:27.295 --> 00:01:30.095
<00:01:27.295>improved <00:01:27.470>user <00:01:27.645>experience <00:01:27.820>if <00:01:27.995>they're <00:01:28.170>not <00:01:28.345>having <00:01:28.520>to <00:01:28.695>wait

32
00:01:30.155 --> 00:01:32.455
<00:01:30.155>for <00:01:30.435>a <00:01:30.715>component <00:01:30.995>to <00:01:31.275>to <00:01:31.555>load.

33
00:01:32.555 --> 00:01:35.935
<00:01:32.555>And <00:01:32.695>then <00:01:32.835>actually <00:01:32.975>the <00:01:33.115>time <00:01:33.255>it <00:01:33.395>takes <00:01:33.535>to <00:01:33.675>pause <00:01:33.815>the <00:01:33.955>JavaScript

34
00:01:36.635 --> 00:01:38.015
<00:01:36.634>if <00:01:36.883>we <00:01:37.131>can <00:01:37.380>shrink <00:01:37.628>the <00:01:37.877>JavaScript.

35
00:01:38.165 --> 00:01:39.895
<00:01:38.164>Both <00:01:38.445>of <00:01:38.725>those <00:01:39.005>things <00:01:39.285>speed <00:01:39.565>up

36
00:01:39.895 --> 00:01:43.295
<00:01:39.895>and <00:01:40.050>we <00:01:40.206>get <00:01:40.361>a <00:01:40.517>much <00:01:40.672>snappier <00:01:40.828>feeling <00:01:40.983>in <00:01:41.139>our <00:01:41.295>applications.

37
00:01:44.395 --> 00:01:47.335
<00:01:44.395>And <00:01:44.570>these <00:01:44.745>are <00:01:44.920>both <00:01:45.095>measures <00:01:45.270>of <00:01:45.445>uh, <00:01:45.620>web <00:01:45.795>vitals.

38
00:01:47.635 --> 00:01:49.375
<00:01:47.634>So <00:01:47.868>if <00:01:48.101>you <00:01:48.335>can <00:01:48.568>improve <00:01:48.801>these <00:01:49.035>metrics,

39
00:01:49.675 --> 00:01:52.095
<00:01:49.675>you <00:01:49.908>might <00:01:50.141>actually <00:01:50.375>get <00:01:50.608>some <00:01:50.841>SEO <00:01:51.075>improvements

40
00:01:52.195 --> 00:01:53.255
<00:01:52.195>in <00:01:52.433>terms <00:01:52.672>of <00:01:52.910>your <00:01:53.149>ranking.

41
00:01:55.665 --> 00:01:57.685
<00:01:55.664>And <00:01:55.839>this <00:01:56.014>is <00:01:56.190>something <00:01:56.365>that <00:01:56.539>we, <00:01:56.714>we <00:01:56.889>work <00:01:57.065>towards

42
00:01:57.745 --> 00:01:59.245
<00:01:57.745>for <00:01:58.195>our <00:01:58.645>component <00:01:59.095>itself.

43
00:01:59.705 --> 00:02:01.285
<00:01:59.705>So <00:02:00.171>from <00:02:00.638>version <00:02:01.105>33,

44
00:02:01.385 --> 00:02:03.765
<00:02:01.385>we <00:02:01.618>actually <00:02:01.851>made <00:02:02.085>our <00:02:02.318>component <00:02:02.551>library <00:02:02.785>up

45
00:02:03.765 --> 00:02:06.685
<00:02:03.765>to <00:02:03.940>about <00:02:04.115>40% <00:02:04.290>smaller <00:02:04.465>for <00:02:04.640>the <00:02:04.815>simple <00:02:04.990>use <00:02:05.165>cases.

46
00:02:07.585 --> 00:02:10.165
<00:02:07.585>And <00:02:07.740>we <00:02:07.896>did <00:02:08.051>this <00:02:08.207>through <00:02:08.362>process <00:02:08.518>of <00:02:08.673>improving <00:02:08.829>tree <00:02:08.984>shaking

47
00:02:10.305 --> 00:02:11.565
<00:02:10.305>and <00:02:11.439>ification.

48
00:02:12.305 --> 00:02:16.365
<00:02:12.305>And <00:02:12.421>so <00:02:12.538>these <00:02:12.655>are <00:02:12.771>the <00:02:12.888>two <00:02:13.005>I <00:02:13.121>guess <00:02:13.238>branches <00:02:13.355>that <00:02:13.471>we <00:02:13.588>could <00:02:13.705>say

49
00:02:16.365 --> 00:02:17.485
<00:02:16.365>that <00:02:16.509>I <00:02:16.653>want <00:02:16.797>to <00:02:16.941>talk <00:02:17.085>to <00:02:17.229>you <00:02:17.373>about.

50
00:02:17.485 --> 00:02:20.965
<00:02:17.485>There's <00:02:17.640>tree <00:02:17.796>shaking, <00:02:17.951>making <00:02:18.107>sure <00:02:18.262>that <00:02:18.418>if <00:02:18.573>you've <00:02:18.729>got <00:02:18.885>code

51
00:02:21.115 --> 00:02:22.405
<00:02:21.115>that <00:02:21.405>is <00:02:21.695>in <00:02:21.985>your <00:02:22.276>component

52
00:02:22.425 --> 00:02:25.405
<00:02:22.425>or <00:02:22.565>in <00:02:22.705>your <00:02:22.845>application <00:02:22.985>that <00:02:23.125>isn't <00:02:23.265>used, <00:02:23.405>you <00:02:23.545>don't <00:02:23.685>want <00:02:23.825>that

53
00:02:25.585 --> 00:02:27.285
<00:02:25.585>to <00:02:25.785>be <00:02:25.985>end <00:02:26.185>up <00:02:26.385>in <00:02:26.585>your <00:02:26.785>final <00:02:26.985>bundle.

54
00:02:28.185 --> 00:02:31.605
<00:02:28.185>And <00:02:28.360>then <00:02:28.535>for <00:02:28.710>the <00:02:28.885>code <00:02:29.060>that <00:02:29.235>does <00:02:29.410>is <00:02:29.585>used

55
00:02:31.725 --> 00:02:34.805
<00:02:31.725>and <00:02:31.864>is <00:02:32.005>required, <00:02:32.144>we <00:02:32.285>want <00:02:32.424>to <00:02:32.565>write <00:02:32.704>that <00:02:32.845>in <00:02:32.984>a <00:02:33.125>way

56
00:02:34.995 --> 00:02:36.925
<00:02:34.995>that <00:02:35.345>all <00:02:35.695>the <00:02:36.045>modifiers <00:02:36.395>and

57
00:02:36.925 --> 00:02:39.885
<00:02:36.925>and <00:02:37.065>our <00:02:37.205>build <00:02:37.345>tools <00:02:37.485>can <00:02:37.625>make <00:02:37.765>that <00:02:37.905>as <00:02:38.045>small <00:02:38.185>as <00:02:38.325>possible.

58
00:02:40.265 --> 00:02:43.365
<00:02:40.265>So <00:02:40.392>I'm <00:02:40.519>gonna <00:02:40.646>cover <00:02:40.774>both <00:02:40.901>of <00:02:41.028>those <00:02:41.155>um, <00:02:41.283>areas <00:02:41.410>in <00:02:41.537>this <00:02:41.665>talk,

59
00:02:44.265 --> 00:02:48.725
<00:02:44.265>but <00:02:44.404>things <00:02:44.545>I'm <00:02:44.684>not <00:02:44.825>gonna <00:02:44.964>talk <00:02:45.105>about <00:02:45.244>is <00:02:45.385>like <00:02:45.524>lazy <00:02:45.665>loading.

60
00:02:49.105 --> 00:02:52.005
<00:02:49.105>So <00:02:49.280>maybe, <00:02:49.454>you <00:02:49.630>know, <00:02:49.804>using <00:02:49.980>the <00:02:50.155>kind <00:02:50.329>of <00:02:50.505>features

61
00:02:52.005 --> 00:02:53.885
<00:02:52.005>of <00:02:52.204>your <00:02:52.405>bundler <00:02:52.605>to <00:02:52.805>only <00:02:53.005>load <00:02:53.204>the <00:02:53.405>code

62
00:02:54.145 --> 00:02:56.925
<00:02:54.145>for <00:02:54.320>a <00:02:54.495>particular <00:02:54.670>route, <00:02:54.845>you <00:02:55.020>know <00:02:55.195>that's <00:02:55.370>very <00:02:55.545>important

63
00:02:56.945 --> 00:02:58.685
<00:02:56.945>but <00:02:57.120>that's <00:02:57.295>not <00:02:57.470>what <00:02:57.644>I'm <00:02:57.820>gonna <00:02:57.995>be <00:02:58.170>focusing <00:02:58.345>on.

64
00:02:59.225 --> 00:03:01.485
<00:02:59.225>And <00:02:59.380>also <00:02:59.536>I'm <00:02:59.691>not <00:02:59.847>gonna <00:03:00.002>be <00:03:00.158>talking <00:03:00.313>about <00:03:00.469>server <00:03:00.625>side

65
00:03:01.485 --> 00:03:04.325
<00:03:01.485>rendering <00:03:01.685>'cause <00:03:01.885>clearly <00:03:02.085>that <00:03:02.285>is <00:03:02.485>the <00:03:02.685>best <00:03:02.885>way

66
00:03:04.905 --> 00:03:07.805
<00:03:04.905>of <00:03:05.080>having <00:03:05.255>the <00:03:05.430>smallest <00:03:05.605>bundles <00:03:05.780>for <00:03:05.955>your <00:03:06.130>landing <00:03:06.305>pages.

67
00:03:08.385 --> 00:03:09.765
<00:03:08.385>So <00:03:08.591>again, <00:03:08.798>I'm <00:03:09.006>not <00:03:09.213>gonna <00:03:09.420>cover <00:03:09.626>that.

68
00:03:09.985 --> 00:03:11.165
<00:03:09.985>I'm <00:03:10.197>gonna <00:03:10.409>focus <00:03:10.622>on <00:03:10.834>the <00:03:11.047>areas

69
00:03:11.165 --> 00:03:13.165
<00:03:11.165>where <00:03:11.398>you <00:03:11.631>have <00:03:11.864>some <00:03:12.098>really <00:03:12.331>interactive <00:03:12.565>parts

70
00:03:13.165 --> 00:03:17.245
<00:03:13.165>of <00:03:13.304>your <00:03:13.445>application <00:03:13.584>and <00:03:13.725>you <00:03:13.864>need <00:03:14.005>that <00:03:14.144>code <00:03:14.285>to <00:03:14.424>be <00:03:14.565>loaded.

71
00:03:18.865 --> 00:03:21.245
<00:03:18.865>So <00:03:19.145>let's <00:03:19.425>start <00:03:19.705>with <00:03:19.985>tree <00:03:20.265>shaking.

72
00:03:22.425 --> 00:03:25.925
<00:03:22.425>So <00:03:22.580>the <00:03:22.736>term <00:03:22.891>tree <00:03:23.047>shaking <00:03:23.202>came <00:03:23.358>about <00:03:23.513>from <00:03:23.669>about <00:03:23.825>2015

73
00:03:26.065 --> 00:03:27.205
<00:03:26.065>by <00:03:26.578>Rich <00:03:27.090>Harris.

74
00:03:27.985 --> 00:03:31.565
<00:03:27.985>Um, <00:03:28.101>and <00:03:28.218>he, <00:03:28.335>he <00:03:28.451>created <00:03:28.568>rollup <00:03:28.685>and <00:03:28.801>now <00:03:28.918>he <00:03:29.035>is <00:03:29.151>working <00:03:29.268>on <00:03:29.385>spelt

75
00:03:31.985 --> 00:03:34.125
<00:03:31.985>and <00:03:32.265>instead <00:03:32.545>of <00:03:32.825>dead <00:03:33.105>code <00:03:33.385>elimination,

76
00:03:34.125 --> 00:03:36.765
<00:03:34.125>which <00:03:34.300>was <00:03:34.475>a <00:03:34.650>common <00:03:34.825>term <00:03:35.000>more <00:03:35.175>for <00:03:35.350>the <00:03:35.525>kind

77
00:03:36.765 --> 00:03:39.245
<00:03:36.765>of <00:03:36.998>the <00:03:37.231>backend <00:03:37.464>technologies, <00:03:37.698>introduce <00:03:37.931>this <00:03:38.165>term

78
00:03:39.245 --> 00:03:42.125
<00:03:39.245>of <00:03:39.420>tree <00:03:39.595>shaking <00:03:39.770>where <00:03:39.945>you <00:03:40.120>start <00:03:40.295>at <00:03:40.470>the <00:03:40.645>root

79
00:03:42.125 --> 00:03:44.685
<00:03:42.125>of <00:03:42.325>your <00:03:42.525>application <00:03:42.725>and <00:03:42.925>you <00:03:43.125>work <00:03:43.325>out, <00:03:43.525>okay,

80
00:03:44.685 --> 00:03:47.805
<00:03:44.685>well <00:03:44.860>my <00:03:45.035>main <00:03:45.210>file <00:03:45.385>is <00:03:45.560>including <00:03:45.735>this <00:03:45.910>other <00:03:46.085>module.

81
00:03:48.065 --> 00:03:51.845
<00:03:48.065>So <00:03:48.220>that <00:03:48.376>code, <00:03:48.531>I'm <00:03:48.687>gonna <00:03:48.842>follow <00:03:48.998>that <00:03:49.153>abstract <00:03:49.309>syntax <00:03:49.465>tree

82
00:03:52.265 --> 00:03:54.005
<00:03:52.265>and <00:03:52.464>see <00:03:52.665>that <00:03:52.864>all <00:03:53.065>that <00:03:53.265>code <00:03:53.464>is <00:03:53.665>used.

83
00:03:54.005 --> 00:03:56.925
<00:03:54.005>And <00:03:54.144>then <00:03:54.285>if <00:03:54.424>there's <00:03:54.565>code <00:03:54.704>which <00:03:54.845>isn't <00:03:54.984>touched, <00:03:55.125>we <00:03:55.265>know <00:03:55.405>that

84
00:03:56.925 --> 00:03:59.485
<00:03:56.925>that <00:03:57.052>code <00:03:57.179>isn't <00:03:57.306>used <00:03:57.434>and <00:03:57.561>it <00:03:57.688>can <00:03:57.815>be <00:03:57.943>dropped <00:03:58.070>from <00:03:58.197>the <00:03:58.325>bundle.

85
00:04:00.665 --> 00:04:04.605
<00:04:00.665>So <00:04:00.792>as <00:04:00.919>an <00:04:01.046>example <00:04:01.174>of <00:04:01.301>this, <00:04:01.428>say <00:04:01.555>we've <00:04:01.683>got <00:04:01.810>this <00:04:01.937>utils <00:04:02.065>module

86
00:04:05.225 --> 00:04:06.565
<00:04:05.225>and <00:04:05.466>then <00:04:05.707>in <00:04:05.948>our <00:04:06.189>main <00:04:06.430>file

87
00:04:07.185 --> 00:04:08.805
<00:04:07.185>we <00:04:07.385>are <00:04:07.585>gonna <00:04:07.785>use <00:04:07.985>one <00:04:08.185>of <00:04:08.385>those <00:04:08.585>functions.

88
00:04:09.065 --> 00:04:10.765
<00:04:09.065>So <00:04:09.265>we've <00:04:09.465>got <00:04:09.665>a <00:04:09.865>sum <00:04:10.065>and <00:04:10.265>a <00:04:10.465>multiply,

89
00:04:11.545 --> 00:04:13.445
<00:04:11.545>but <00:04:11.744>in <00:04:11.945>our <00:04:12.144>main <00:04:12.345>file <00:04:12.545>we're <00:04:12.744>only <00:04:12.945>actually

90
00:04:13.445 --> 00:04:14.485
<00:04:13.445>using <00:04:13.757>the <00:04:14.069>sum <00:04:14.381>function.

91
00:04:15.705 --> 00:04:19.085
<00:04:15.705>So <00:04:15.845>what <00:04:15.985>that <00:04:16.125>means <00:04:16.265>is <00:04:16.405>the <00:04:16.545>multiply <00:04:16.685>code <00:04:16.825>is <00:04:16.965>actually <00:04:17.105>unused.

92
00:04:19.745 --> 00:04:23.245
<00:04:19.745>So <00:04:19.885>when <00:04:20.024>we <00:04:20.165>bundle <00:04:20.305>this <00:04:20.445>code <00:04:20.584>together, <00:04:20.725>that <00:04:20.865>can <00:04:21.005>be <00:04:21.144>dropped

93
00:04:23.705 --> 00:04:25.285
<00:04:23.705>or <00:04:23.984>as <00:04:24.265>in <00:04:24.544>tree <00:04:24.825>shaken <00:04:25.104>away.

94
00:04:26.105 --> 00:04:28.325
<00:04:26.105>So <00:04:26.260>the <00:04:26.416>only <00:04:26.571>code <00:04:26.727>that <00:04:26.882>we <00:04:27.038>actually <00:04:27.193>need <00:04:27.349>to <00:04:27.505>ship

95
00:04:28.325 --> 00:04:30.325
<00:04:28.325>to <00:04:28.558>the <00:04:28.791>browser <00:04:29.025>is <00:04:29.258>the <00:04:29.491>sum <00:04:29.724>function.

96
00:04:31.795 --> 00:04:34.815
<00:04:31.795>So <00:04:31.911>this <00:04:32.028>is <00:04:32.145>a <00:04:32.261>way <00:04:32.378>that <00:04:32.495>we <00:04:32.611>can <00:04:32.728>write <00:04:32.845>our <00:04:32.961>code, <00:04:33.078>have <00:04:33.195>some

97
00:04:34.815 --> 00:04:37.055
<00:04:34.815>of <00:04:35.015>it <00:04:35.215>shaken <00:04:35.415>away <00:04:35.615>and <00:04:35.815>reduce <00:04:36.015>the <00:04:36.215>amount

98
00:04:37.055 --> 00:04:38.295
<00:04:37.055>of <00:04:37.278>code <00:04:37.501>in <00:04:37.724>our <00:04:37.947>final <00:04:38.171>bundle.

99
00:04:41.155 --> 00:04:44.775
<00:04:41.155>But <00:04:41.330>a <00:04:41.505>very <00:04:41.679>important <00:04:41.854>consideration <00:04:42.030>about <00:04:42.205>tree <00:04:42.380>shaking <00:04:42.554>is

100
00:04:45.475 --> 00:04:47.895
<00:04:45.475>the <00:04:45.615>code <00:04:45.755>that <00:04:45.895>we <00:04:46.035>drop <00:04:46.175>has <00:04:46.315>to <00:04:46.455>be <00:04:46.595>side <00:04:46.735>effect <00:04:46.875>free.

101
00:04:49.595 --> 00:04:52.575
<00:04:49.595>Now <00:04:49.750>a <00:04:49.906>side <00:04:50.061>effect <00:04:50.217>is, <00:04:50.372>is <00:04:50.528>code <00:04:50.683>that <00:04:50.839>performs <00:04:50.995>some

102
00:04:53.825 --> 00:04:57.735
<00:04:53.825>externally <00:04:54.000>visible <00:04:54.175>behavior <00:04:54.349>just <00:04:54.525>when <00:04:54.700>that <00:04:54.875>module <00:04:55.050>is <00:04:55.224>loaded.

103
00:04:59.115 --> 00:05:02.215
<00:04:59.115>So <00:04:59.270>as <00:04:59.426>an <00:04:59.581>example, <00:04:59.737>let's <00:04:59.892>update <00:05:00.048>our <00:05:00.203>U <00:05:00.359>utils <00:05:00.515>code

104
00:05:02.795 --> 00:05:04.815
<00:05:02.795>and <00:05:02.970>we're <00:05:03.145>gonna <00:05:03.320>stick <00:05:03.495>a <00:05:03.670>console <00:05:03.845>log <00:05:04.020>on <00:05:04.195>it.

105
00:05:05.275 --> 00:05:08.375
<00:05:05.275>So <00:05:05.402>this <00:05:05.529>just <00:05:05.656>represents <00:05:05.784>any <00:05:05.911>kind <00:05:06.038>of <00:05:06.165>code <00:05:06.293>which <00:05:06.420>is <00:05:06.547>gonna <00:05:06.674>make

106
00:05:08.925 --> 00:05:12.295
<00:05:08.925>some <00:05:09.205>externally <00:05:09.485>visible, <00:05:09.765>you <00:05:10.045>know, <00:05:10.325>system.

107
00:05:12.295 --> 00:05:14.215
<00:05:12.295>Maybe <00:05:12.645>you're <00:05:12.995>initializing <00:05:13.345>some <00:05:13.695>component.

108
00:05:14.995 --> 00:05:17.455
<00:05:14.995>And <00:05:15.102>this <00:05:15.210>is <00:05:15.318>code <00:05:15.425>that <00:05:15.533>is <00:05:15.641>run <00:05:15.748>at <00:05:15.856>the <00:05:15.964>top <00:05:16.071>level <00:05:16.179>of <00:05:16.287>the <00:05:16.395>module.

109
00:05:18.195 --> 00:05:20.015
<00:05:18.195>So <00:05:18.350>you <00:05:18.506>can <00:05:18.661>see <00:05:18.817>this <00:05:18.972>isn't <00:05:19.128>wrapped <00:05:19.283>in <00:05:19.439>a <00:05:19.594>function.

110
00:05:20.015 --> 00:05:22.495
<00:05:20.015>There's <00:05:20.248>nothing <00:05:20.481>that <00:05:20.715>the <00:05:20.948>user <00:05:21.181>or <00:05:21.414>you

111
00:05:22.495 --> 00:05:25.455
<00:05:22.495>and <00:05:22.635>your <00:05:22.775>application <00:05:22.915>has <00:05:23.055>to <00:05:23.195>do <00:05:23.335>to <00:05:23.475>call <00:05:23.615>this <00:05:23.755>code <00:05:23.895>just

112
00:05:25.475 --> 00:05:27.095
<00:05:25.475>by <00:05:25.825>importing <00:05:26.175>from <00:05:26.525>this <00:05:26.875>file,

113
00:05:27.805 --> 00:05:29.575
<00:05:27.805>this <00:05:28.038>log <00:05:28.271>statement <00:05:28.505>is <00:05:28.738>gonna <00:05:28.971>be <00:05:29.205>written.

114
00:05:31.725 --> 00:05:34.865
<00:05:31.725>So <00:05:31.841>if <00:05:31.958>this <00:05:32.075>is <00:05:32.191>our <00:05:32.308>main <00:05:32.425>file <00:05:32.541>and <00:05:32.658>we've <00:05:32.775>got <00:05:32.891>the <00:05:33.008>sum <00:05:33.125>function

115
00:05:34.925 --> 00:05:36.865
<00:05:34.925>and <00:05:35.080>then <00:05:35.236>we <00:05:35.391>log <00:05:35.547>out <00:05:35.702>the <00:05:35.858>result <00:05:36.013>of <00:05:36.169>that <00:05:36.325>sum,

116
00:05:37.485 --> 00:05:39.345
<00:05:37.485>the <00:05:37.660>output <00:05:37.835>you're <00:05:38.010>gonna <00:05:38.185>see <00:05:38.360>is <00:05:38.535>this <00:05:38.710>is <00:05:38.885>a

117
00:05:39.345 --> 00:05:40.545
<00:05:39.345>side <00:05:39.615>effect <00:05:39.885>and <00:05:40.155>then <00:05:40.425>three.

118
00:05:43.565 --> 00:05:46.665
<00:05:43.565>But <00:05:43.740>now <00:05:43.915>say <00:05:44.090>we <00:05:44.265>don't <00:05:44.440>use <00:05:44.615>that <00:05:44.790>some <00:05:44.965>function

119
00:05:47.365 --> 00:05:49.025
<00:05:47.365>and <00:05:47.645>instead <00:05:47.925>we <00:05:48.205>just, <00:05:48.485>you <00:05:48.765>know,

120
00:05:49.175 --> 00:05:50.785
<00:05:49.175>work <00:05:49.525>out <00:05:49.875>the <00:05:50.225>result <00:05:50.575>ourselves.

121
00:05:51.805 --> 00:05:55.145
<00:05:51.805>So <00:05:51.932>if <00:05:52.059>we <00:05:52.186>think, <00:05:52.314>okay <00:05:52.441>well <00:05:52.568>this <00:05:52.695>code <00:05:52.823>is <00:05:52.950>now <00:05:53.077>tree <00:05:53.205>shakeable,

122
00:05:56.285 --> 00:05:57.925
<00:05:56.284>that's <00:05:56.564>gonna <00:05:56.844>be <00:05:57.124>an <00:05:57.405>unused <00:05:57.684>import

123
00:05:59.315 --> 00:06:00.495
<00:05:59.315>and <00:05:59.580>that's <00:05:59.846>gonna <00:06:00.111>be <00:06:00.377>removed.

124
00:06:00.555 --> 00:06:04.255
<00:06:00.555>And <00:06:00.788>so <00:06:01.021>our <00:06:01.255>final <00:06:01.488>bundle, <00:06:01.721>excuse <00:06:01.955>me,

125
00:06:05.395 --> 00:06:08.055
<00:06:05.395>our <00:06:05.534>final <00:06:05.674>bundle <00:06:05.815>is <00:06:05.955>just <00:06:06.094>gonna <00:06:06.234>have <00:06:06.375>the <00:06:06.515>output <00:06:06.655>of <00:06:06.794>three.

126
00:06:09.315 --> 00:06:11.295
<00:06:09.315>So <00:06:09.470>you <00:06:09.626>can <00:06:09.781>see <00:06:09.937>that <00:06:10.092>here <00:06:10.248>by <00:06:10.403>dropping <00:06:10.559>the <00:06:10.715>code,

127
00:06:11.305 --> 00:06:13.895
<00:06:11.305>we've <00:06:11.505>actually <00:06:11.705>changed <00:06:11.905>the <00:06:12.105>behavior <00:06:12.305>of <00:06:12.505>the <00:06:12.705>program.

128
00:06:14.715 --> 00:06:15.895
<00:06:14.715>And <00:06:14.892>so <00:06:15.068>this <00:06:15.246>is <00:06:15.423>what <00:06:15.599>we <00:06:15.777>have

129
00:06:15.895 --> 00:06:17.815
<00:06:15.895>to <00:06:16.094>be <00:06:16.294>very <00:06:16.495>careful <00:06:16.695>about <00:06:16.895>with <00:06:17.094>side <00:06:17.294>effects.

130
00:06:20.695 --> 00:06:24.675
<00:06:20.695>So <00:06:20.850>when <00:06:21.006>is <00:06:21.161>it <00:06:21.317>actually <00:06:21.472>safe <00:06:21.628>to <00:06:21.783>drop <00:06:21.939>this <00:06:22.094>code

131
00:06:25.015 --> 00:06:28.875
<00:06:25.015>and <00:06:25.142>how <00:06:25.269>does <00:06:25.396>the <00:06:25.524>bundler <00:06:25.651>know <00:06:25.778>that <00:06:25.905>code <00:06:26.033>is <00:06:26.160>side <00:06:26.287>effect <00:06:26.414>free?

132
00:06:29.975 --> 00:06:31.475
<00:06:29.975>So <00:06:30.312>some <00:06:30.650>of <00:06:30.987>the <00:06:31.325>bundlers,

133
00:06:31.475 --> 00:06:32.995
<00:06:31.475>and <00:06:31.748>this <00:06:32.022>is <00:06:32.295>where <00:06:32.569>each <00:06:32.843>bundler

134
00:06:32.995 --> 00:06:35.315
<00:06:32.995>that <00:06:33.275>you <00:06:33.555>use <00:06:33.835>behaves <00:06:34.115>slightly <00:06:34.395>differently

135
00:06:35.735 --> 00:06:37.875
<00:06:35.735>and <00:06:35.890>we'll <00:06:36.046>come <00:06:36.201>back <00:06:36.357>to <00:06:36.512>that <00:06:36.668>later <00:06:36.823>on <00:06:36.979>in <00:06:37.135>the

136
00:06:37.915 --> 00:06:39.075
<00:06:37.915>presentation <00:06:38.437>as <00:06:38.959>well.

137
00:06:40.495 --> 00:06:42.395
<00:06:40.495>So <00:06:40.695>it <00:06:40.895>can <00:06:41.095>either <00:06:41.295>make <00:06:41.495>an <00:06:41.695>attempt <00:06:41.895>itself

138
00:06:42.415 --> 00:06:44.675
<00:06:42.415>to <00:06:42.570>work <00:06:42.726>out <00:06:42.881>if <00:06:43.037>the <00:06:43.192>code <00:06:43.348>is <00:06:43.503>side <00:06:43.659>effect <00:06:43.815>free,

139
00:06:45.095 --> 00:06:47.075
<00:06:45.095>but <00:06:45.375>this <00:06:45.655>is <00:06:45.935>really <00:06:46.215>quite <00:06:46.495>hard.

140
00:06:47.575 --> 00:06:49.595
<00:06:47.575>So <00:06:47.775>it <00:06:47.974>might <00:06:48.175>make <00:06:48.375>the <00:06:48.575>build <00:06:48.775>tool <00:06:48.974>slower.

141
00:06:49.735 --> 00:06:52.075
<00:06:49.735>So, <00:06:49.890>and <00:06:50.046>other <00:06:50.201>build <00:06:50.357>tools <00:06:50.512>just <00:06:50.668>don't <00:06:50.823>even <00:06:50.979>bother <00:06:51.135>trying.

142
00:06:53.335 --> 00:06:55.355
<00:06:53.335>So <00:06:53.534>they <00:06:53.734>might <00:06:53.935>assume <00:06:54.135>that <00:06:54.335>everything <00:06:54.534>is <00:06:54.734>just

143
00:06:56.345 --> 00:06:59.675
<00:06:56.345>side <00:06:56.485>effect <00:06:56.625>free <00:06:56.765>or <00:06:56.905>it's, <00:06:57.045>no, <00:06:57.185>sorry, <00:06:57.325>the <00:06:57.465>other <00:06:57.605>way <00:06:57.745>round.

144
00:06:59.705 --> 00:07:01.795
<00:06:59.705>They <00:06:59.984>assume <00:07:00.265>everything <00:07:00.544>has <00:07:00.825>side <00:07:01.104>effects

145
00:07:02.215 --> 00:07:03.435
<00:07:02.215>so <00:07:02.489>it <00:07:02.764>won't <00:07:03.038>drop <00:07:03.313>things

146
00:07:03.975 --> 00:07:06.355
<00:07:03.975>unless <00:07:04.208>it's <00:07:04.441>explicitly <00:07:04.675>told <00:07:04.908>by <00:07:05.141>the <00:07:05.375>developer.

147
00:07:07.495 --> 00:07:10.555
<00:07:07.495>So <00:07:07.670>this <00:07:07.845>is <00:07:08.020>actually <00:07:08.195>quite <00:07:08.370>a <00:07:08.545>critical <00:07:08.720>part <00:07:08.895>of

148
00:07:10.775 --> 00:07:15.035
<00:07:10.775>how <00:07:10.974>you <00:07:11.174>configure <00:07:11.375>your <00:07:11.575>application <00:07:11.775>to <00:07:11.974>enable <00:07:12.174>bundlers

149
00:07:15.255 --> 00:07:17.275
<00:07:15.255>to <00:07:15.605>actually <00:07:15.955>drop <00:07:16.305>the <00:07:16.655>code.

150
00:07:18.575 --> 00:07:19.795
<00:07:18.575>And <00:07:18.731>this <00:07:18.888>is <00:07:19.045>how <00:07:19.202>you <00:07:19.359>can <00:07:19.516>do <00:07:19.673>it.

151
00:07:20.095 --> 00:07:22.475
<00:07:20.095>So <00:07:20.235>if <00:07:20.375>you <00:07:20.515>know <00:07:20.655>that <00:07:20.795>the <00:07:20.935>way <00:07:21.075>you've <00:07:21.215>written <00:07:21.355>your <00:07:21.495>application

152
00:07:22.975 --> 00:07:25.475
<00:07:22.975>is <00:07:23.102>all <00:07:23.229>side <00:07:23.356>effect <00:07:23.484>free, <00:07:23.611>you <00:07:23.738>don't <00:07:23.865>have <00:07:23.993>any <00:07:24.120>of <00:07:24.247>that <00:07:24.375>kind

153
00:07:25.475 --> 00:07:27.275
<00:07:25.475>of <00:07:25.630>code <00:07:25.786>running <00:07:25.941>at <00:07:26.097>the <00:07:26.252>top <00:07:26.408>level <00:07:26.563>of <00:07:26.719>a <00:07:26.875>module

154
00:07:28.215 --> 00:07:30.915
<00:07:28.215>in <00:07:28.414>your <00:07:28.614>package <00:07:28.815>Jason, <00:07:29.015>you <00:07:29.215>can <00:07:29.414>set <00:07:29.614>this

155
00:07:31.515 --> 00:07:34.915
<00:07:31.515>property <00:07:31.670>side <00:07:31.826>effects <00:07:31.981>and <00:07:32.137>set <00:07:32.292>that <00:07:32.448>to <00:07:32.603>false <00:07:32.759>so <00:07:32.914>that

156
00:07:34.915 --> 00:07:36.355
<00:07:34.915>what <00:07:35.174>you're <00:07:35.433>telling <00:07:35.692>the <00:07:35.951>bundlers <00:07:36.211>is

157
00:07:36.355 --> 00:07:39.915
<00:07:36.355>that <00:07:36.495>everything <00:07:36.635>in <00:07:36.775>this <00:07:36.915>code <00:07:37.055>under <00:07:37.195>here <00:07:37.335>is <00:07:37.475>side <00:07:37.615>effect <00:07:37.755>free.

158
00:07:40.415 --> 00:07:43.755
<00:07:40.415>So <00:07:40.555>if <00:07:40.695>you <00:07:40.835>do <00:07:40.975>come <00:07:41.115>across <00:07:41.255>an <00:07:41.395>unused <00:07:41.535>import, <00:07:41.675>it's <00:07:41.815>safe

159
00:07:43.775 --> 00:07:46.155
<00:07:43.775>to <00:07:43.930>remove <00:07:44.086>that <00:07:44.241>and <00:07:44.397>in <00:07:44.552>removing <00:07:44.708>it, <00:07:44.863>you're <00:07:45.019>not <00:07:45.174>going

160
00:07:46.155 --> 00:07:47.835
<00:07:46.155>to <00:07:46.388>change <00:07:46.621>the <00:07:46.854>behavior <00:07:47.088>of <00:07:47.321>the <00:07:47.554>code.

161
00:07:48.465 --> 00:07:51.595
<00:07:48.465>Whereas <00:07:48.665>previously <00:07:48.865>the <00:07:49.065>bundler <00:07:49.265>might <00:07:49.465>play <00:07:49.665>it <00:07:49.865>safe

162
00:07:51.855 --> 00:07:53.435
<00:07:51.855>and <00:07:52.205>not <00:07:52.555>remove <00:07:52.905>that <00:07:53.255>import

163
00:07:53.545 --> 00:07:56.035
<00:07:53.545>because <00:07:53.700>there <00:07:53.856>might <00:07:54.011>be <00:07:54.167>some <00:07:54.322>side <00:07:54.478>effect <00:07:54.633>in <00:07:54.789>that <00:07:54.945>code.

164
00:07:57.945 --> 00:07:59.725
<00:07:57.945>You <00:07:58.145>can <00:07:58.344>also <00:07:58.545>be <00:07:58.745>more <00:07:58.945>specific <00:07:59.145>about <00:07:59.344>it

165
00:07:59.725 --> 00:08:03.085
<00:07:59.725>and <00:07:59.865>give <00:08:00.005>it <00:08:00.145>um, <00:08:00.285>like <00:08:00.425>GLO <00:08:00.565>arrays <00:08:00.705>of <00:08:00.845>you <00:08:00.985>know, <00:08:01.125>saying,

166
00:08:03.115 --> 00:08:06.085
<00:08:03.115>well <00:08:03.348>don't <00:08:03.581>drop <00:08:03.815>all <00:08:04.048>the <00:08:04.281>CSS <00:08:04.515>imports

167
00:08:06.395 --> 00:08:10.125
<00:08:06.395>because <00:08:06.534>when <00:08:06.674>you <00:08:06.815>maybe <00:08:06.955>import <00:08:07.094>a <00:08:07.234>CSS <00:08:07.375>file <00:08:07.515>in <00:08:07.655>your <00:08:07.794>code,

168
00:08:10.775 --> 00:08:13.405
<00:08:10.775>there <00:08:10.950>is <00:08:11.125>no <00:08:11.299>usage <00:08:11.474>in <00:08:11.650>in <00:08:11.825>the <00:08:12.000>file <00:08:12.174>itself.

169
00:08:14.065 --> 00:08:15.565
<00:08:14.065>So <00:08:14.257>you <00:08:14.450>don't <00:08:14.643>want <00:08:14.836>that <00:08:15.029>to <00:08:15.222>be <00:08:15.415>dropped.

170
00:08:15.565 --> 00:08:16.565
<00:08:15.565>You <00:08:15.715>don't <00:08:15.865>want <00:08:16.015>the <00:08:16.165>bundle <00:08:16.315>to <00:08:16.465>say,

171
00:08:16.565 --> 00:08:19.485
<00:08:16.565>well <00:08:16.705>nothing's <00:08:16.844>touching <00:08:16.985>this <00:08:17.125>import <00:08:17.265>so <00:08:17.405>I'm <00:08:17.545>going <00:08:17.685>to <00:08:17.825>drop <00:08:17.965>it.

172
00:08:19.945 --> 00:08:21.405
<00:08:19.945>So <00:08:20.132>this <00:08:20.320>is <00:08:20.508>the <00:08:20.695>way, <00:08:20.883>and <00:08:21.071>also <00:08:21.258>maybe

173
00:08:21.405 --> 00:08:22.965
<00:08:21.405>with <00:08:21.580>polyfils <00:08:21.755>you <00:08:21.929>don't <00:08:22.104>want <00:08:22.280>those <00:08:22.455>to <00:08:22.630>be <00:08:22.804>dropped.

174
00:08:23.665 --> 00:08:26.045
<00:08:23.665>So <00:08:23.820>it's <00:08:23.976>a <00:08:24.131>way <00:08:24.287>of <00:08:24.442>saying <00:08:24.598>actually <00:08:24.753>these <00:08:24.909>files <00:08:25.065>do

175
00:08:26.045 --> 00:08:27.165
<00:08:26.045>contain <00:08:26.549>side <00:08:27.053>effects.

176
00:08:30.225 --> 00:08:32.835
<00:08:30.225>Another <00:08:30.425>way <00:08:30.625>that <00:08:30.825>you <00:08:31.025>might <00:08:31.225>actually <00:08:31.425>need <00:08:31.625>to

177
00:08:33.625 --> 00:08:36.515
<00:08:33.625>give <00:08:33.858>the <00:08:34.091>bundle <00:08:34.325>even <00:08:34.558>more <00:08:34.791>information <00:08:35.025>is

178
00:08:36.515 --> 00:08:39.035
<00:08:36.515>through <00:08:36.865>some <00:08:37.215>like <00:08:37.564>pure <00:08:37.914>annotations.

179
00:08:40.255 --> 00:08:42.275
<00:08:40.255>So <00:08:40.410>to <00:08:40.566>give <00:08:40.721>you <00:08:40.877>a <00:08:41.032>bit <00:08:41.188>of <00:08:41.343>context <00:08:41.499>on <00:08:41.655>this,

180
00:08:42.615 --> 00:08:44.715
<00:08:42.615>so <00:08:42.895>if <00:08:43.174>a <00:08:43.455>function <00:08:43.735>is <00:08:44.015>pure,

181
00:08:45.615 --> 00:08:47.715
<00:08:45.615>you <00:08:45.895>know <00:08:46.175>there's <00:08:46.455>when <00:08:46.735>running <00:08:47.015>it

182
00:08:48.295 --> 00:08:51.675
<00:08:48.295>and <00:08:48.450>if <00:08:48.606>it's <00:08:48.761>side <00:08:48.917>effect <00:08:49.072>free, <00:08:49.228>nothing <00:08:49.383>outside <00:08:49.539>of <00:08:49.694>the

183
00:08:52.215 --> 00:08:54.155
<00:08:52.215>the <00:08:52.495>function <00:08:52.775>is <00:08:53.055>gonna <00:08:53.335>be <00:08:53.615>touched.

184
00:08:54.375 --> 00:08:56.805
<00:08:54.375>So <00:08:54.502>like, <00:08:54.629>you <00:08:54.756>know, <00:08:54.884>a <00:08:55.011>sum <00:08:55.138>function, <00:08:55.265>you <00:08:55.393>give <00:08:55.520>it <00:08:55.647>two <00:08:55.775>numbers,

185
00:08:56.905 --> 00:08:59.845
<00:08:56.905>it <00:08:57.060>returns <00:08:57.216>you <00:08:57.371>the <00:08:57.527>value <00:08:57.682>that's, <00:08:57.838>that's <00:08:57.993>a <00:08:58.149>pure <00:08:58.305>function

186
00:09:00.025 --> 00:09:01.485
<00:09:00.025>and <00:09:00.287>also <00:09:00.550>it's <00:09:00.813>side <00:09:01.076>effect <00:09:01.339>free.

187
00:09:03.585 --> 00:09:05.125
<00:09:03.585>But <00:09:03.862>what <00:09:04.139>you <00:09:04.416>might <00:09:04.693>find <00:09:04.971>is

188
00:09:05.125 --> 00:09:07.125
<00:09:05.125>that <00:09:05.405>you've <00:09:05.685>got <00:09:05.965>this <00:09:06.245>complicated <00:09:06.525>function

189
00:09:08.185 --> 00:09:10.365
<00:09:08.185>and <00:09:08.340>actually <00:09:08.496>it's <00:09:08.651>quite, <00:09:08.807>it <00:09:08.962>contains <00:09:09.118>a <00:09:09.273>lot <00:09:09.429>of <00:09:09.584>code

190
00:09:11.945 --> 00:09:14.205
<00:09:11.945>but <00:09:12.145>then <00:09:12.345>the <00:09:12.545>values <00:09:12.745>that <00:09:12.945>it <00:09:13.145>has <00:09:13.345>produced,

191
00:09:14.265 --> 00:09:15.885
<00:09:14.265>so <00:09:14.498>in <00:09:14.731>this <00:09:14.965>level <00:09:15.198>top <00:09:15.431>level <00:09:15.665>one

192
00:09:15.885 --> 00:09:18.245
<00:09:15.885>and <00:09:16.085>top <00:09:16.285>level <00:09:16.485>two, <00:09:16.685>I'm <00:09:16.885>saying <00:09:17.085>top <00:09:17.285>level

193
00:09:18.245 --> 00:09:20.685
<00:09:18.245>because <00:09:18.400>they're <00:09:18.556>at <00:09:18.711>the <00:09:18.867>root <00:09:19.022>of <00:09:19.178>this, <00:09:19.333>this <00:09:19.489>module <00:09:19.645>file,

194
00:09:20.685 --> 00:09:22.165
<00:09:20.685>they're <00:09:20.951>not <00:09:21.217>contained <00:09:21.484>within <00:09:21.750>something <00:09:22.016>else.

195
00:09:23.665 --> 00:09:26.925
<00:09:23.665>If <00:09:23.898>those <00:09:24.131>values <00:09:24.365>aren't <00:09:24.598>used <00:09:24.831>anywhere <00:09:25.064>else

196
00:09:27.505 --> 00:09:30.045
<00:09:27.505>in <00:09:27.705>your <00:09:27.905>application, <00:09:28.105>we <00:09:28.305>actually <00:09:28.505>want <00:09:28.705>to <00:09:28.905>drop

197
00:09:30.695 --> 00:09:32.725
<00:09:30.695>these <00:09:31.161>top <00:09:31.628>level <00:09:32.095>variables

198
00:09:33.425 --> 00:09:36.645
<00:09:33.425>and <00:09:33.599>also <00:09:33.775>the <00:09:33.949>code <00:09:34.125>in <00:09:34.300>the <00:09:34.474>complex <00:09:34.650>pure <00:09:34.824>function.

199
00:09:37.545 --> 00:09:40.605
<00:09:37.545>But <00:09:37.778>if <00:09:38.011>that <00:09:38.245>function <00:09:38.478>is <00:09:38.711>quite <00:09:38.944>complicated

200
00:09:40.665 --> 00:09:42.885
<00:09:40.665>or <00:09:40.898>it's <00:09:41.131>somewhere <00:09:41.365>else <00:09:41.598>in <00:09:41.831>another <00:09:42.064>file,

201
00:09:43.465 --> 00:09:45.605
<00:09:43.465>the <00:09:43.665>bundler <00:09:43.865>might <00:09:44.065>not <00:09:44.265>be <00:09:44.465>able <00:09:44.665>to <00:09:44.865>assume

202
00:09:45.605 --> 00:09:46.685
<00:09:45.605>that <00:09:45.848>it's <00:09:46.091>side <00:09:46.334>effect <00:09:46.577>free.

203
00:09:47.345 --> 00:09:51.125
<00:09:47.345>But <00:09:47.545>using <00:09:47.745>the <00:09:47.945>special <00:09:48.145>annotation <00:09:48.345>we <00:09:48.545>can <00:09:48.745>say,

204
00:09:51.235 --> 00:09:53.525
<00:09:51.235>well <00:09:51.468>if <00:09:51.701>these <00:09:51.935>variables <00:09:52.168>top <00:09:52.401>level <00:09:52.635>one

205
00:09:53.525 --> 00:09:56.005
<00:09:53.525>and <00:09:53.699>top <00:09:53.875>level <00:09:54.050>two <00:09:54.225>aren't <00:09:54.400>used, <00:09:54.574>then <00:09:54.750>it's <00:09:54.925>safe

206
00:09:56.025 --> 00:09:58.565
<00:09:56.025>to <00:09:56.225>also <00:09:56.425>drop <00:09:56.625>the <00:09:56.824>code <00:09:57.025>for <00:09:57.225>that <00:09:57.425>function.

207
00:09:59.585 --> 00:10:01.885
<00:09:59.585>So <00:09:59.818>this, <00:10:00.051>this <00:10:00.285>is <00:10:00.518>where <00:10:00.751>you <00:10:00.985>have

208
00:10:01.885 --> 00:10:03.325
<00:10:01.885>to <00:10:02.070>do <00:10:02.255>quite <00:10:02.440>a <00:10:02.625>little <00:10:02.810>bit <00:10:02.995>more <00:10:03.181>work.

209
00:10:03.675 --> 00:10:06.245
<00:10:03.675>Hopefully <00:10:03.954>you <00:10:04.234>won't <00:10:04.515>need <00:10:04.795>this <00:10:05.074>situation

210
00:10:06.905 --> 00:10:08.365
<00:10:06.905>but <00:10:07.124>it's <00:10:07.343>something <00:10:07.562>to <00:10:07.781>be <00:10:08.000>aware <00:10:08.219>of

211
00:10:08.715 --> 00:10:10.925
<00:10:08.715>because <00:10:08.890>you <00:10:09.065>also <00:10:09.240>then <00:10:09.415>have <00:10:09.590>to <00:10:09.765>apply <00:10:09.940>it <00:10:10.115>everywhere

212
00:10:10.925 --> 00:10:13.445
<00:10:10.925>where <00:10:11.099>the <00:10:11.275>function <00:10:11.449>is <00:10:11.625>used, <00:10:11.800>not <00:10:11.974>where <00:10:12.150>it's <00:10:12.324>defined.

213
00:10:16.785 --> 00:10:19.005
<00:10:16.785>But <00:10:16.940>then <00:10:17.096>this <00:10:17.251>is <00:10:17.407>where <00:10:17.562>once <00:10:17.718>you <00:10:17.873>start <00:10:18.029>this <00:10:18.185>process

214
00:10:19.105 --> 00:10:21.565
<00:10:19.105>of <00:10:19.305>tree <00:10:19.505>shaking, <00:10:19.705>you'll <00:10:19.905>realize <00:10:20.105>there's <00:10:20.305>quite <00:10:20.505>a

215
00:10:21.565 --> 00:10:22.645
<00:10:21.565>lot <00:10:21.759>of <00:10:21.953>ways <00:10:22.148>to <00:10:22.342>break <00:10:22.537>it.

216
00:10:23.545 --> 00:10:26.565
<00:10:23.545>And <00:10:23.719>here's, <00:10:23.895>here's <00:10:24.069>one <00:10:24.245>example, <00:10:24.420>is <00:10:24.594>anyone <00:10:24.770>using <00:10:24.944>decorators?

217
00:10:28.945 --> 00:10:31.245
<00:10:28.945>No <00:10:29.145>one's <00:10:29.345>using <00:10:29.545>decorators <00:10:29.745>oh <00:10:29.945>one <00:10:30.145>or <00:10:30.345>two.

218
00:10:32.105 --> 00:10:34.165
<00:10:32.105>So <00:10:32.338>decorators, <00:10:32.571>they're <00:10:32.805>a <00:10:33.038>very <00:10:33.271>good <00:10:33.505>way

219
00:10:34.165 --> 00:10:35.205
<00:10:34.165>of <00:10:34.477>breaking <00:10:34.789>tree <00:10:35.101>shaking.

220
00:10:36.515 --> 00:10:38.855
<00:10:36.515>And <00:10:36.655>this <00:10:36.795>is <00:10:36.935>something <00:10:37.074>that <00:10:37.215>we <00:10:37.355>were <00:10:37.495>using <00:10:37.635>previously <00:10:37.775>at <00:10:37.915>Ag

221
00:10:38.925 --> 00:10:41.535
<00:10:38.925>Grid <00:10:39.158>to <00:10:39.391>like <00:10:39.625>do <00:10:39.858>our <00:10:40.091>dependency <00:10:40.324>injection

222
00:10:41.535 --> 00:10:43.975
<00:10:41.535>because <00:10:41.709>it <00:10:41.885>gave <00:10:42.060>us <00:10:42.235>a <00:10:42.410>really <00:10:42.584>nice <00:10:42.760>developer <00:10:42.935>experience

223
00:10:44.315 --> 00:10:47.615
<00:10:44.315>to <00:10:44.455>be <00:10:44.595>be <00:10:44.735>able <00:10:44.875>to <00:10:45.015>inject <00:10:45.155>these <00:10:45.295>different <00:10:45.435>services <00:10:45.575>from <00:10:45.715>our

224
00:10:48.155 --> 00:10:50.455
<00:10:48.155>um, <00:10:48.621>dependency <00:10:49.088>container <00:10:49.555>injection

225
00:10:50.915 --> 00:10:52.215
<00:10:50.915>and <00:10:51.305>wire <00:10:51.695>everything <00:10:52.085>together.

226
00:10:53.195 --> 00:10:56.655
<00:10:53.195>But <00:10:53.350>the <00:10:53.506>problem <00:10:53.661>is <00:10:53.817>with <00:10:53.972>decorators <00:10:54.128>is <00:10:54.283>they <00:10:54.439>actually <00:10:54.595>get

227
00:10:57.135 --> 00:10:59.095
<00:10:57.135>transpired <00:10:57.310>into <00:10:57.485>code <00:10:57.660>that <00:10:57.835>looks <00:10:58.010>a <00:10:58.185>bit <00:10:58.360>like <00:10:58.535>this.

228
00:10:59.835 --> 00:11:02.255
<00:10:59.835>And <00:10:59.975>the <00:11:00.115>way <00:11:00.255>that <00:11:00.395>it <00:11:00.535>works <00:11:00.675>is <00:11:00.815>there's <00:11:00.955>top <00:11:01.095>level <00:11:01.235>references

229
00:11:02.275 --> 00:11:03.335
<00:11:02.275>to <00:11:02.513>all <00:11:02.752>of <00:11:02.990>these <00:11:03.229>classes.

230
00:11:04.955 --> 00:11:07.735
<00:11:04.955>So <00:11:05.188>the <00:11:05.421>bundler <00:11:05.655>can't <00:11:05.888>actually <00:11:06.121>work <00:11:06.355>out

231
00:11:08.245 --> 00:11:09.855
<00:11:08.245>whether <00:11:08.595>this <00:11:08.945>code <00:11:09.295>is <00:11:09.645>used

232
00:11:09.855 --> 00:11:11.415
<00:11:09.855>because <00:11:10.135>there's <00:11:10.415>always <00:11:10.695>at <00:11:10.975>least <00:11:11.255>one

233
00:11:11.695 --> 00:11:12.895
<00:11:11.695>reference <00:11:12.055>directly <00:11:12.415>to <00:11:12.775>it.

234
00:11:13.595 --> 00:11:15.055
<00:11:13.595>And <00:11:13.814>it's <00:11:14.033>actually <00:11:14.252>like <00:11:14.471>a <00:11:14.689>similar <00:11:14.909>thing

235
00:11:15.055 --> 00:11:16.575
<00:11:15.055>for <00:11:15.396>static <00:11:15.739>properties <00:11:16.081>as <00:11:16.423>well.

236
00:11:16.995 --> 00:11:20.055
<00:11:16.995>If <00:11:17.150>you've <00:11:17.306>got <00:11:17.461>static <00:11:17.617>properties <00:11:17.772>in <00:11:17.928>a <00:11:18.083>class, <00:11:18.239>depending <00:11:18.395>on

237
00:11:20.055 --> 00:11:23.735
<00:11:20.055>what <00:11:20.288>um, <00:11:20.521>target <00:11:20.755>es <00:11:20.988>uh, <00:11:21.221>target <00:11:21.454>you

238
00:11:24.285 --> 00:11:28.375
<00:11:24.285>targeting <00:11:24.485>like <00:11:24.685>ES <00:11:24.885>20, <00:11:25.084>20 <00:11:25.285>22, <00:11:25.485>those <00:11:25.685>two

239
00:11:28.995 --> 00:11:30.895
<00:11:28.995>can <00:11:29.275>prevent <00:11:29.555>code <00:11:29.835>from <00:11:30.115>being <00:11:30.395>dropped.

240
00:11:31.715 --> 00:11:33.495
<00:11:31.715>So <00:11:31.948>yeah, <00:11:32.181>so <00:11:32.415>I <00:11:32.648>would <00:11:32.881>avoid <00:11:33.115>decorators

241
00:11:34.035 --> 00:11:36.055
<00:11:34.035>and <00:11:34.190>this <00:11:34.346>is <00:11:34.501>something <00:11:34.657>that <00:11:34.812>we <00:11:34.968>did <00:11:35.123>a <00:11:35.279>massive <00:11:35.435>refactor

242
00:11:36.075 --> 00:11:37.335
<00:11:36.075>of <00:11:36.453>with <00:11:36.831>ag <00:11:37.209>grid.

243
00:11:38.095 --> 00:11:42.535
<00:11:38.095>'cause <00:11:38.250>previously <00:11:38.406>we <00:11:38.561>had <00:11:38.717>to <00:11:38.872>ship <00:11:39.028>different <00:11:39.183>MPM <00:11:39.339>packages <00:11:39.495>just

244
00:11:42.655 --> 00:11:44.975
<00:11:42.655>to <00:11:42.888>achieve <00:11:43.121>this <00:11:43.355>kind <00:11:43.588>of <00:11:43.821>tree <00:11:44.055>shaking

245
00:11:45.285 --> 00:11:48.375
<00:11:45.285>because <00:11:45.440>any <00:11:45.596>class <00:11:45.751>that <00:11:45.907>had <00:11:46.062>a <00:11:46.218>decorator <00:11:46.373>on <00:11:46.529>it <00:11:46.685>meant

246
00:11:48.375 --> 00:11:49.615
<00:11:48.375>that <00:11:48.561>if <00:11:48.747>it <00:11:48.933>was <00:11:49.119>in <00:11:49.305>the <00:11:49.491>bundle

247
00:11:49.755 --> 00:11:52.655
<00:11:49.755>or <00:11:49.930>in <00:11:50.105>the <00:11:50.280>code, <00:11:50.455>it <00:11:50.630>couldn't <00:11:50.805>be <00:11:50.980>tree <00:11:51.155>shaken.

248
00:11:53.305 --> 00:11:56.485
<00:11:53.305>So <00:11:53.421>in <00:11:53.538>version <00:11:53.655>33 <00:11:53.771>we, <00:11:53.888>we <00:11:54.005>got <00:11:54.121>rid <00:11:54.238>of <00:11:54.354>all <00:11:54.471>of <00:11:54.588>the <00:11:54.704>decorators

249
00:11:56.625 --> 00:11:57.685
<00:11:56.625>inside <00:11:56.943>of <00:11:57.261>Ag <00:11:57.579>grid

250
00:11:57.685 --> 00:12:00.805
<00:11:57.685>and <00:11:57.840>came <00:11:57.996>up <00:11:58.151>with <00:11:58.307>a <00:11:58.462>new, <00:11:58.618>um, <00:11:58.773>module <00:11:58.929>based <00:11:59.084>system

251
00:12:01.465 --> 00:12:02.965
<00:12:01.465>and <00:12:01.690>that <00:12:01.915>meant <00:12:02.140>we <00:12:02.365>could <00:12:02.590>ship <00:12:02.815>all

252
00:12:02.965 --> 00:12:05.885
<00:12:02.965>of <00:12:03.120>our <00:12:03.276>code <00:12:03.431>in <00:12:03.587>just <00:12:03.742>two <00:12:03.898>single <00:12:04.053>packages <00:12:04.209>like <00:12:04.365>our

253
00:12:05.885 --> 00:12:07.085
<00:12:05.885>community <00:12:06.245>and <00:12:06.605>our <00:12:06.965>enterprise.

254
00:12:08.425 --> 00:12:11.565
<00:12:08.425>So <00:12:08.625>this <00:12:08.824>greatly <00:12:09.025>simplified, <00:12:09.224>you <00:12:09.425>know, <00:12:09.625>installing <00:12:09.824>the,

255
00:12:11.945 --> 00:12:13.205
<00:12:11.945>the <00:12:12.134>project <00:12:12.323>for <00:12:12.512>all <00:12:12.701>of <00:12:12.890>our <00:12:13.079>users.

256
00:12:13.825 --> 00:12:15.005
<00:12:13.825>You <00:12:14.037>have <00:12:14.249>all <00:12:14.462>the <00:12:14.674>features <00:12:14.887>there,

257
00:12:15.225 --> 00:12:17.245
<00:12:15.225>but <00:12:15.458>depending <00:12:15.691>on <00:12:15.925>which <00:12:16.158>modules <00:12:16.391>you <00:12:16.625>import,

258
00:12:17.835 --> 00:12:19.245
<00:12:17.835>then <00:12:18.088>you <00:12:18.342>only <00:12:18.596>get <00:12:18.850>that <00:12:19.104>code.

259
00:12:19.385 --> 00:12:22.685
<00:12:19.385>So <00:12:19.525>this <00:12:19.665>was <00:12:19.805>a <00:12:19.944>massive <00:12:20.085>step <00:12:20.225>in <00:12:20.365>I <00:12:20.505>guess <00:12:20.645>both <00:12:20.785>developer

260
00:12:22.685 --> 00:12:24.525
<00:12:22.685>productivity <00:12:22.964>and <00:12:23.244>also <00:12:23.525>for <00:12:23.805>us <00:12:24.084>ourselves

261
00:12:25.165 --> 00:12:26.405
<00:12:25.165>simplifying <00:12:25.536>our <00:12:25.909>build <00:12:26.281>chain.

262
00:12:27.825 --> 00:12:29.325
<00:12:27.825>So <00:12:27.993>this <00:12:28.162>is <00:12:28.331>kind <00:12:28.500>of <00:12:28.668>what <00:12:28.837>we <00:12:29.006>went <00:12:29.175>for.

263
00:12:30.025 --> 00:12:31.845
<00:12:30.025>We <00:12:30.375>define <00:12:30.725>just <00:12:31.074>plain <00:12:31.425>modules.

264
00:12:32.665 --> 00:12:35.725
<00:12:32.665>You <00:12:32.865>can <00:12:33.064>see <00:12:33.265>we're <00:12:33.464>including <00:12:33.665>API <00:12:33.865>functions <00:12:34.064>here.

265
00:12:35.905 --> 00:12:39.445
<00:12:35.905>So <00:12:36.105>even <00:12:36.305>from <00:12:36.505>our <00:12:36.704>grid <00:12:36.905>API, <00:12:37.105>the <00:12:37.305>code

266
00:12:39.445 --> 00:12:41.925
<00:12:39.445>for <00:12:39.600>the <00:12:39.756>actual <00:12:39.911>functions <00:12:40.067>is <00:12:40.222>only <00:12:40.378>included <00:12:40.533>in <00:12:40.689>the <00:12:40.845>module.

267
00:12:42.415 --> 00:12:44.085
<00:12:42.415>We've <00:12:42.694>got <00:12:42.974>CSS <00:12:43.255>strings <00:12:43.535>in <00:12:43.814>there.

268
00:12:44.625 --> 00:12:47.405
<00:12:44.625>So <00:12:44.780>everything <00:12:44.936>is <00:12:45.091>tied <00:12:45.247>to <00:12:45.402>these <00:12:45.558>modules <00:12:45.713>so <00:12:45.869>that <00:12:46.025>if

269
00:12:47.405 --> 00:12:50.125
<00:12:47.405>that <00:12:47.755>module <00:12:48.105>isn't <00:12:48.454>included, <00:12:48.805>all

270
00:12:50.125 --> 00:12:53.245
<00:12:50.125>of <00:12:50.252>this <00:12:50.379>code <00:12:50.506>can <00:12:50.634>now <00:12:50.761>be <00:12:50.888>tree <00:12:51.015>shaken <00:12:51.143>away <00:12:51.270>by <00:12:51.397>the <00:12:51.525>bundlers.

271
00:12:54.485 --> 00:12:57.425
<00:12:54.485>And <00:12:54.625>this <00:12:54.765>is <00:12:54.905>what <00:12:55.045>has <00:12:55.185>led <00:12:55.325>to <00:12:55.465>that <00:12:55.605>kind <00:12:55.745>of <00:12:55.885>ability

272
00:12:57.485 --> 00:13:00.745
<00:12:57.485>to <00:12:57.660>drop <00:12:57.835>40% <00:12:58.010>off <00:12:58.185>the <00:12:58.360>overall <00:12:58.535>bundle <00:12:58.710>when <00:12:58.885>you

273
00:13:00.745 --> 00:13:01.905
<00:13:00.745>include <00:13:01.006>it <00:13:01.266>in <00:13:01.528>your <00:13:01.789>application.

274
00:13:04.475 --> 00:13:09.135
<00:13:04.475>But <00:13:04.630>There's <00:13:04.786>more <00:13:04.941>ways <00:13:05.097>that <00:13:05.252>you <00:13:05.408>can <00:13:05.563>break <00:13:05.719>tree <00:13:05.875>shaking.

275
00:13:09.915 --> 00:13:12.575
<00:13:09.915>So <00:13:10.115>barrel <00:13:10.314>exports <00:13:10.515>are <00:13:10.714>a <00:13:10.915>very <00:13:11.115>good <00:13:11.314>way

276
00:13:12.575 --> 00:13:13.935
<00:13:12.575>of <00:13:12.819>breaking <00:13:13.064>tree <00:13:13.309>shaking <00:13:13.554>as <00:13:13.799>well.

277
00:13:14.515 --> 00:13:16.455
<00:13:14.515>Say <00:13:14.689>you've <00:13:14.865>got <00:13:15.040>all <00:13:15.215>these <00:13:15.390>different <00:13:15.564>U <00:13:15.740>util <00:13:15.915>functions,

278
00:13:16.455 --> 00:13:19.015
<00:13:16.455>you've <00:13:16.595>got <00:13:16.735>a <00:13:16.875>arrays <00:13:17.015>like <00:13:17.155>things <00:13:17.295>with <00:13:17.435>the <00:13:17.575>browser <00:13:17.715>and <00:13:17.855>date.

279
00:13:19.635 --> 00:13:22.055
<00:13:19.635>And <00:13:19.790>then <00:13:19.946>to <00:13:20.101>make <00:13:20.257>it <00:13:20.412>easier <00:13:20.568>elsewhere <00:13:20.723>in <00:13:20.879>your <00:13:21.035>application,

280
00:13:22.115 --> 00:13:23.535
<00:13:22.115>you <00:13:22.434>then <00:13:22.754>re-export <00:13:23.073>it <00:13:23.393>all

281
00:13:23.955 --> 00:13:25.975
<00:13:23.955>and <00:13:24.188>you <00:13:24.421>do <00:13:24.655>something <00:13:24.888>like <00:13:25.121>import <00:13:25.355>star

282
00:13:26.115 --> 00:13:29.055
<00:13:26.115>as <00:13:26.290>ut <00:13:26.465>utils <00:13:26.640>from <00:13:26.815>this <00:13:26.990>U <00:13:27.165>utils <00:13:27.340>barrel <00:13:27.515>file

283
00:13:29.675 --> 00:13:31.335
<00:13:29.675>and <00:13:29.875>then <00:13:30.074>you <00:13:30.275>do <00:13:30.474>ut <00:13:30.675>utils <00:13:30.875>dot <00:13:31.074>sum.

284
00:13:32.525 --> 00:13:35.055
<00:13:32.525>What <00:13:32.725>you've <00:13:32.925>done <00:13:33.125>here <00:13:33.324>is <00:13:33.525>you've <00:13:33.725>now <00:13:33.925>meant

285
00:13:35.085 --> 00:13:38.935
<00:13:35.085>that <00:13:35.225>the <00:13:35.365>bundler <00:13:35.505>can't <00:13:35.645>tree <00:13:35.785>shake <00:13:35.925>any <00:13:36.065>of <00:13:36.205>the <00:13:36.345>other <00:13:36.485>files

286
00:13:39.645 --> 00:13:41.695
<00:13:39.645>because <00:13:39.925>you've <00:13:40.204>attached <00:13:40.485>every <00:13:40.765>function <00:13:41.045>to

287
00:13:41.695 --> 00:13:42.895
<00:13:41.695>that <00:13:42.055>underscore <00:13:42.415>U <00:13:42.775>utils

288
00:13:42.995 --> 00:13:45.215
<00:13:42.995>and <00:13:43.170>that's <00:13:43.345>being <00:13:43.520>used <00:13:43.695>at <00:13:43.870>least <00:13:44.045>in <00:13:44.220>one <00:13:44.395>place

289
00:13:45.675 --> 00:13:47.095
<00:13:45.675>so <00:13:45.930>it <00:13:46.186>can't <00:13:46.441>drop <00:13:46.697>the <00:13:46.953>code

290
00:13:47.635 --> 00:13:49.975
<00:13:47.635>of <00:13:47.790>all <00:13:47.946>the <00:13:48.101>other <00:13:48.257>things <00:13:48.412>even <00:13:48.568>though <00:13:48.723>you're <00:13:48.879>only <00:13:49.035>using

291
00:13:50.235 --> 00:13:51.335
<00:13:50.235>say <00:13:50.565>the <00:13:50.895>sum <00:13:51.225>function.

292
00:13:52.995 --> 00:13:56.485
<00:13:52.995>So <00:13:53.135>to <00:13:53.275>get <00:13:53.415>around <00:13:53.555>this <00:13:53.695>you <00:13:53.835>can <00:13:53.975>delete <00:13:54.115>that <00:13:54.255>barrel <00:13:54.395>file

293
00:13:56.625 --> 00:13:59.765
<00:13:56.625>and <00:13:56.858>instead <00:13:57.091>import <00:13:57.325>and <00:13:57.558>reference <00:13:57.791>them <00:13:58.025>directly.

294
00:14:00.585 --> 00:14:03.005
<00:14:00.585>And <00:14:00.712>so <00:14:00.839>now <00:14:00.966>this <00:14:01.094>is <00:14:01.221>not <00:14:01.348>only <00:14:01.475>gonna <00:14:01.603>speed <00:14:01.730>up <00:14:01.857>your <00:14:01.985>build

295
00:14:03.245 --> 00:14:05.605
<00:14:03.245>process, <00:14:03.525>um, <00:14:03.805>it's <00:14:04.085>also <00:14:04.365>then <00:14:04.645>means

296
00:14:05.605 --> 00:14:08.805
<00:14:05.605>that <00:14:05.780>you're <00:14:05.955>only <00:14:06.130>gonna <00:14:06.305>ship <00:14:06.480>the <00:14:06.655>U <00:14:06.830>util <00:14:07.005>functions

297
00:14:08.805 --> 00:14:09.845
<00:14:08.805>that <00:14:09.117>you're <00:14:09.429>actually <00:14:09.741>using.

298
00:14:13.105 --> 00:14:15.965
<00:14:13.105>And <00:14:13.280>it <00:14:13.455>is <00:14:13.630>pretty <00:14:13.805>easy <00:14:13.980>to <00:14:14.155>break <00:14:14.330>tree <00:14:14.505>shaking.

299
00:14:16.825 --> 00:14:17.965
<00:14:16.825>So <00:14:17.081>one <00:14:17.338>example <00:14:17.594>of <00:14:17.851>this,

300
00:14:18.085 --> 00:14:19.885
<00:14:18.085>I <00:14:18.240>showed <00:14:18.396>you <00:14:18.551>the <00:14:18.707>new <00:14:18.862>module <00:14:19.018>structure <00:14:19.173>that <00:14:19.329>we <00:14:19.485>did.

301
00:14:20.905 --> 00:14:24.325
<00:14:20.905>So <00:14:21.045>within <00:14:21.185>each <00:14:21.324>of <00:14:21.464>the <00:14:21.605>modules <00:14:21.745>we <00:14:21.885>define <00:14:22.025>the <00:14:22.165>module <00:14:22.305>name,

302
00:14:24.345 --> 00:14:26.285
<00:14:24.345>the <00:14:24.545>version, <00:14:24.745>and <00:14:24.945>then <00:14:25.145>all <00:14:25.345>the <00:14:25.545>other <00:14:25.745>properties.

303
00:14:26.585 --> 00:14:29.125
<00:14:26.585>So <00:14:26.725>we <00:14:26.865>thought <00:14:27.005>well <00:14:27.145>let's <00:14:27.285>just <00:14:27.425>have <00:14:27.565>a <00:14:27.705>common <00:14:27.845>function <00:14:27.985>which

304
00:14:29.735 --> 00:14:33.005
<00:14:29.735>where <00:14:29.862>we <00:14:29.989>can <00:14:30.116>set <00:14:30.244>the <00:14:30.371>version <00:14:30.498>once <00:14:30.625>and <00:14:30.753>apply <00:14:30.880>the <00:14:31.007>module <00:14:31.135>name.

305
00:14:34.545 --> 00:14:36.885
<00:14:34.545>So <00:14:34.700>we <00:14:34.856>had <00:14:35.011>this <00:14:35.167>function <00:14:35.322>which <00:14:35.478>takes <00:14:35.633>the <00:14:35.789>module <00:14:35.944>name,

306
00:14:36.885 --> 00:14:40.205
<00:14:36.885>sets <00:14:37.025>the <00:14:37.165>version, <00:14:37.305>and <00:14:37.444>then <00:14:37.585>we <00:14:37.725>updated <00:14:37.865>all <00:14:38.005>of <00:14:38.145>our <00:14:38.285>modules

307
00:14:40.205 --> 00:14:43.725
<00:14:40.205>to <00:14:40.405>use <00:14:40.605>that <00:14:40.805>instead <00:14:41.005>of <00:14:41.205>just <00:14:41.405>doing <00:14:41.605>uh,

308
00:14:43.725 --> 00:14:45.285
<00:14:43.725>the <00:14:44.191>versions <00:14:44.658>explicitly <00:14:45.125>everywhere.

309
00:14:46.625 --> 00:14:50.525
<00:14:46.625>But <00:14:46.765>then <00:14:46.905>what <00:14:47.045>we <00:14:47.185>found <00:14:47.325>is <00:14:47.465>that <00:14:47.605>suddenly <00:14:47.745>the <00:14:47.885>build <00:14:48.025>test

310
00:14:50.525 --> 00:14:53.765
<00:14:50.525>that <00:14:50.680>we <00:14:50.836>did <00:14:50.991>with <00:14:51.147>ES <00:14:51.302>build <00:14:51.458>tree <00:14:51.613>shaking <00:14:51.769>completely <00:14:51.925>broke.

311
00:14:54.225 --> 00:14:57.245
<00:14:54.225>So <00:14:54.380>every <00:14:54.536>module <00:14:54.691>was <00:14:54.847>being <00:14:55.002>included <00:14:55.158>in <00:14:55.313>the <00:14:55.469>final <00:14:55.625>bundle,

312
00:14:57.755 --> 00:14:59.365
<00:14:57.755>whereas <00:14:58.221>Webpac <00:14:58.688>was <00:14:59.155>fine.

313
00:15:00.185 --> 00:15:03.645
<00:15:00.185>And <00:15:00.324>so <00:15:00.464>this <00:15:00.604>is <00:15:00.744>where <00:15:00.885>we <00:15:01.025>start <00:15:01.165>seeing <00:15:01.305>there's <00:15:01.444>differences <00:15:01.584>in

314
00:15:03.645 --> 00:15:05.165
<00:15:03.645>terms <00:15:03.840>of <00:15:04.035>the <00:15:04.231>build <00:15:04.426>tools <00:15:04.622>that <00:15:04.817>you <00:15:05.012>use

315
00:15:05.745 --> 00:15:09.285
<00:15:05.745>and <00:15:05.885>the <00:15:06.025>importance <00:15:06.165>of <00:15:06.305>testing <00:15:06.445>when <00:15:06.585>it <00:15:06.725>comes <00:15:06.865>to <00:15:07.005>bundle <00:15:07.145>size

316
00:15:09.715 --> 00:15:11.965
<00:15:09.715>because <00:15:09.915>you <00:15:10.115>might <00:15:10.315>be <00:15:10.515>making <00:15:10.715>a <00:15:10.915>tiny <00:15:11.115>change,

317
00:15:12.935 --> 00:15:17.365
<00:15:12.935>which <00:15:13.109>then <00:15:13.285>your <00:15:13.459>bundler <00:15:13.635>doesn't <00:15:13.810>actually <00:15:13.984>understand <00:15:14.160>in <00:15:14.334>terms

318
00:15:17.385 --> 00:15:19.325
<00:15:17.385>of <00:15:17.585>actually <00:15:17.785>that <00:15:17.985>code <00:15:18.185>can <00:15:18.385>now <00:15:18.585>be <00:15:18.785>dropped.

319
00:15:20.585 --> 00:15:21.645
<00:15:20.585>So <00:15:20.903>testing <00:15:21.221>is <00:15:21.539>key

320
00:15:22.385 --> 00:15:23.725
<00:15:22.385>and <00:15:22.626>there's <00:15:22.867>some <00:15:23.108>really <00:15:23.349>good <00:15:23.591>um,

321
00:15:24.045 --> 00:15:25.605
<00:15:24.045>packages <00:15:24.245>out <00:15:24.444>there <00:15:24.645>to <00:15:24.844>help <00:15:25.045>you <00:15:25.245>do <00:15:25.444>this.

322
00:15:25.955 --> 00:15:28.365
<00:15:25.955>When <00:15:26.110>you're <00:15:26.266>building <00:15:26.421>you, <00:15:26.577>you <00:15:26.732>know, <00:15:26.888>you <00:15:27.043>get <00:15:27.199>the <00:15:27.355>kind

323
00:15:28.365 --> 00:15:31.765
<00:15:28.365>of <00:15:28.520>log <00:15:28.676>line <00:15:28.831>telling <00:15:28.987>you <00:15:29.142>how <00:15:29.298>big <00:15:29.453>your <00:15:29.609>application <00:15:29.765>is,

324
00:15:32.145 --> 00:15:35.085
<00:15:32.145>but <00:15:32.261>you <00:15:32.378>can <00:15:32.495>hook <00:15:32.611>up <00:15:32.728>tools <00:15:32.845>like <00:15:32.961>size <00:15:33.078>limit <00:15:33.194>where <00:15:33.311>you <00:15:33.428>can <00:15:33.545>say

325
00:15:35.685 --> 00:15:38.525
<00:15:35.685>I <00:15:35.824>want <00:15:35.964>my <00:15:36.104>final <00:15:36.244>bundle <00:15:36.385>to <00:15:36.525>be, <00:15:36.665>you <00:15:36.805>know, <00:15:36.944>this <00:15:37.084>size.

326
00:15:38.745 --> 00:15:41.165
<00:15:38.745>And <00:15:38.885>on <00:15:39.025>your <00:15:39.165>PRS <00:15:39.305>it <00:15:39.445>can <00:15:39.585>tell <00:15:39.725>you <00:15:39.865>well <00:15:40.005>this <00:15:40.145>is

327
00:15:41.165 --> 00:15:43.565
<00:15:41.165>what <00:15:41.305>the <00:15:41.444>current <00:15:41.584>size <00:15:41.724>is <00:15:41.865>and <00:15:42.005>you <00:15:42.145>can <00:15:42.285>see <00:15:42.425>whether <00:15:42.564>you're

328
00:15:43.565 --> 00:15:44.965
<00:15:43.565>trending <00:15:43.880>up <00:15:44.195>or <00:15:44.510>trending <00:15:44.825>down.

329
00:15:45.985 --> 00:15:47.765
<00:15:45.985>So <00:15:46.218>you've <00:15:46.451>just <00:15:46.685>got <00:15:46.918>to <00:15:47.151>have <00:15:47.385>visibility.

330
00:15:48.315 --> 00:15:51.005
<00:15:48.315>Like <00:15:48.490>we've <00:15:48.665>added <00:15:48.840>these <00:15:49.015>internal <00:15:49.190>tests <00:15:49.365>to <00:15:49.540>Ag <00:15:49.715>grid.

331
00:15:51.005 --> 00:15:54.365
<00:15:51.005>We, <00:15:51.132>we <00:15:51.259>set <00:15:51.386>up <00:15:51.514>tests <00:15:51.641>where <00:15:51.768>we <00:15:51.895>build <00:15:52.023>grids <00:15:52.150>with <00:15:52.277>one <00:15:52.405>module

332
00:15:54.585 --> 00:15:56.645
<00:15:54.585>or <00:15:54.865>you <00:15:55.145>know, <00:15:55.425>selection <00:15:55.705>of <00:15:55.985>modules

333
00:15:56.665 --> 00:15:58.925
<00:15:56.665>and <00:15:56.839>we <00:15:57.015>define <00:15:57.189>what <00:15:57.365>the <00:15:57.540>expected <00:15:57.714>size <00:15:57.890>should <00:15:58.064>be.

334
00:15:59.585 --> 00:16:01.885
<00:15:59.585>And <00:15:59.785>there's <00:15:59.985>been <00:16:00.185>many <00:16:00.385>times <00:16:00.585>now <00:16:00.785>where <00:16:00.985>we

335
00:16:01.885 --> 00:16:03.245
<00:16:01.885>as <00:16:02.191>developers <00:16:02.497>you <00:16:02.803>make <00:16:03.109>changes

336
00:16:04.345 --> 00:16:05.565
<00:16:04.345>and <00:16:04.711>then <00:16:05.077>suddenly <00:16:05.443>one

337
00:16:05.565 --> 00:16:08.045
<00:16:05.565>of <00:16:05.765>those <00:16:05.965>modules <00:16:06.165>has <00:16:06.365>stopped <00:16:06.565>being <00:16:06.765>tree <00:16:06.965>shaken.

338
00:16:08.345 --> 00:16:10.925
<00:16:08.345>And <00:16:08.500>so <00:16:08.656>at <00:16:08.811>least <00:16:08.967>now <00:16:09.122>we've <00:16:09.278>got <00:16:09.433>this <00:16:09.589>instant <00:16:09.745>kind

339
00:16:10.925 --> 00:16:12.765
<00:16:10.925>of <00:16:11.080>feedback <00:16:11.236>we <00:16:11.391>go <00:16:11.547>and <00:16:11.702>we <00:16:11.858>can <00:16:12.013>fix <00:16:12.169>the <00:16:12.324>code

340
00:16:12.765 --> 00:16:14.005
<00:16:12.765>and <00:16:12.988>work <00:16:13.211>out <00:16:13.434>what's <00:16:13.657>gone <00:16:13.881>wrong.

341
00:16:14.545 --> 00:16:16.205
<00:16:14.545>So <00:16:14.824>if <00:16:15.104>bundle <00:16:15.385>size <00:16:15.665>is <00:16:15.944>important,

342
00:16:16.675 --> 00:16:18.205
<00:16:16.675>make <00:16:16.950>sure <00:16:17.225>you're <00:16:17.501>testing <00:16:17.776>it <00:16:18.052>on

343
00:16:18.215 --> 00:16:19.485
<00:16:18.215>every <00:16:18.500>change <00:16:18.786>that <00:16:19.072>you're <00:16:19.358>making.

344
00:16:24.885 --> 00:16:28.905
<00:16:24.885>So <00:16:25.012>maybe <00:16:25.139>then <00:16:25.266>your <00:16:25.394>tests <00:16:25.521>have <00:16:25.648>failed, <00:16:25.775>what <00:16:25.903>do <00:16:26.030>you <00:16:26.157>do <00:16:26.285>next?

345
00:16:29.015 --> 00:16:30.305
<00:16:29.015>Because <00:16:29.305>you've <00:16:29.595>then <00:16:29.885>gotta <00:16:30.175>go

346
00:16:30.305 --> 00:16:33.345
<00:16:30.305>and <00:16:30.479>work <00:16:30.655>out, <00:16:30.829>okay, <00:16:31.005>what <00:16:31.180>code <00:16:31.354>is <00:16:31.530>being <00:16:31.704>included

347
00:16:33.535 --> 00:16:34.785
<00:16:33.535>that <00:16:33.910>wasn't <00:16:34.285>included <00:16:34.660>before.

348
00:16:35.645 --> 00:16:37.185
<00:16:35.645>And <00:16:35.843>there's <00:16:36.040>some <00:16:36.238>quite <00:16:36.437>good <00:16:36.635>tools <00:16:36.833>for <00:16:37.031>this.

349
00:16:37.855 --> 00:16:40.545
<00:16:37.855>There's <00:16:38.055>source <00:16:38.255>map <00:16:38.455>explorer <00:16:38.655>that's <00:16:38.855>been <00:16:39.055>around, <00:16:39.255>um,

350
00:16:40.565 --> 00:16:41.625
<00:16:40.565>for <00:16:40.803>a <00:16:41.042>very <00:16:41.280>long <00:16:41.519>time.

351
00:16:42.245 --> 00:16:44.585
<00:16:42.245>So <00:16:42.400>as <00:16:42.556>long <00:16:42.711>as <00:16:42.867>you're <00:16:43.022>building <00:16:43.178>with <00:16:43.333>source <00:16:43.489>maps <00:16:43.645>on,

352
00:16:44.925 --> 00:16:47.985
<00:16:44.925>you <00:16:45.080>can <00:16:45.236>get <00:16:45.391>this <00:16:45.547>very <00:16:45.702>detailed <00:16:45.858>overview <00:16:46.013>of <00:16:46.169>the <00:16:46.324>code

353
00:16:47.985 --> 00:16:49.265
<00:16:47.985>that <00:16:48.215>is <00:16:48.445>actually <00:16:48.676>in <00:16:48.906>your <00:16:49.137>bundle.

354
00:16:50.135 --> 00:16:53.145
<00:16:50.135>Another <00:16:50.262>tool <00:16:50.389>which <00:16:50.516>has <00:16:50.644>a <00:16:50.771>a <00:16:50.898>Veep <00:16:51.025>plugin <00:16:51.153>which <00:16:51.280>makes <00:16:51.407>it <00:16:51.535>very

355
00:16:53.145 --> 00:16:55.785
<00:16:53.145>easy <00:16:53.345>to <00:16:53.545>drop <00:16:53.745>into <00:16:53.944>your <00:16:54.145>configuration <00:16:54.345>is <00:16:54.545>sonder.

356
00:16:56.445 --> 00:16:58.545
<00:16:56.445>Um, <00:16:56.620>and <00:16:56.795>here <00:16:56.970>we <00:16:57.145>can <00:16:57.320>have <00:16:57.495>a <00:16:57.670>quick <00:16:57.845>demo

357
00:16:58.605 --> 00:16:59.625
<00:16:58.605>of <00:16:58.788>what <00:16:58.972>that <00:16:59.155>might <00:16:59.339>look <00:16:59.523>like.

358
00:17:00.525 --> 00:17:02.945
<00:17:00.525>So <00:17:00.699>from <00:17:00.875>this <00:17:01.050>output <00:17:01.225>with <00:17:01.400>the <00:17:01.574>source <00:17:01.750>maps <00:17:01.925>on,

359
00:17:03.205 --> 00:17:06.065
<00:17:03.205>you <00:17:03.360>can <00:17:03.516>then <00:17:03.671>drill <00:17:03.827>into <00:17:03.982>this <00:17:04.138>tree, <00:17:04.293>oh <00:17:04.449>heat <00:17:04.605>map

360
00:17:06.085 --> 00:17:07.905
<00:17:06.085>and <00:17:06.318>it <00:17:06.551>will <00:17:06.785>tell <00:17:07.018>you, <00:17:07.251>you <00:17:07.485>know,

361
00:17:07.905 --> 00:17:10.065
<00:17:07.905>which <00:17:08.079>code <00:17:08.254>has <00:17:08.430>been <00:17:08.605>included, <00:17:08.780>you <00:17:08.954>can <00:17:09.129>actually <00:17:09.305>look

362
00:17:10.065 --> 00:17:12.345
<00:17:10.065>through <00:17:10.298>it <00:17:10.531>and <00:17:10.765>it's <00:17:10.998>highlighting <00:17:11.231>the <00:17:11.465>code

363
00:17:12.535 --> 00:17:13.985
<00:17:12.535>that <00:17:12.796>is <00:17:13.057>in <00:17:13.318>the <00:17:13.579>final <00:17:13.839>bundle.

364
00:17:14.605 --> 00:17:15.585
<00:17:14.605>So <00:17:14.752>you <00:17:14.899>can <00:17:15.046>see <00:17:15.193>there <00:17:15.340>are <00:17:15.487>some

365
00:17:15.785 --> 00:17:16.905
<00:17:15.785>functions <00:17:16.037>there <00:17:16.289>which <00:17:16.540>weren't <00:17:16.792>included.

366
00:17:18.205 --> 00:17:20.985
<00:17:18.204>So <00:17:18.360>by <00:17:18.516>using <00:17:18.671>these <00:17:18.827>tools <00:17:18.982>you <00:17:19.138>can <00:17:19.293>then <00:17:19.449>dive <00:17:19.605>in

367
00:17:20.985 --> 00:17:23.625
<00:17:20.984>and <00:17:21.140>say, <00:17:21.296>oh <00:17:21.451>okay, <00:17:21.607>actually <00:17:21.762>this <00:17:21.918>function <00:17:22.073>is <00:17:22.229>being <00:17:22.385>included

368
00:17:24.175 --> 00:17:26.105
<00:17:24.175>when <00:17:24.375>I <00:17:24.575>wasn't <00:17:24.774>actually <00:17:24.974>expecting <00:17:25.175>it <00:17:25.375>to <00:17:25.575>be.

369
00:17:26.445 --> 00:17:28.705
<00:17:26.444>And <00:17:26.572>that <00:17:26.699>can <00:17:26.826>give <00:17:26.954>you <00:17:27.081>kind <00:17:27.208>of <00:17:27.335>some <00:17:27.463>hints <00:17:27.590>on <00:17:27.717>the <00:17:27.845>way

370
00:17:28.705 --> 00:17:31.945
<00:17:28.705>to <00:17:28.879>then <00:17:29.054>working <00:17:29.230>out, <00:17:29.405>okay, <00:17:29.580>why <00:17:29.754>has <00:17:29.929>my <00:17:30.105>change

371
00:17:32.855 --> 00:17:34.395
<00:17:32.855>broken <00:17:33.086>the <00:17:33.317>tree <00:17:33.548>shaking <00:17:33.779>in <00:17:34.010>this <00:17:34.241>way?

372
00:17:37.365 --> 00:17:39.305
<00:17:37.365>So <00:17:37.645>that's <00:17:37.925>kind <00:17:38.205>of <00:17:38.485>tree <00:17:38.765>shaking.

373
00:17:39.765 --> 00:17:42.145
<00:17:39.765>Um, <00:17:39.892>and <00:17:40.019>now <00:17:40.146>let's <00:17:40.274>kind <00:17:40.401>of <00:17:40.528>move <00:17:40.655>on <00:17:40.783>to <00:17:40.910>the <00:17:41.037>second <00:17:41.165>part

374
00:17:42.145 --> 00:17:44.985
<00:17:42.145>of <00:17:42.378>this, <00:17:42.611>which <00:17:42.845>is <00:17:43.078>optimizing <00:17:43.311>the <00:17:43.545>ification.

375
00:17:47.775 --> 00:17:50.125
<00:17:47.775>So <00:17:47.950>I'm <00:17:48.125>sure <00:17:48.300>we <00:17:48.475>all <00:17:48.650>know <00:17:48.825>what <00:17:49.000>ification <00:17:49.175>is,

376
00:17:50.225 --> 00:17:54.725
<00:17:50.225>but <00:17:50.365>it's <00:17:50.504>this <00:17:50.645>process <00:17:50.784>of <00:17:50.925>taking <00:17:51.064>code, <00:17:51.205>updating <00:17:51.344>it <00:17:51.485>in <00:17:51.625>terms

377
00:17:54.725 --> 00:17:56.525
<00:17:54.725>of <00:17:55.004>variable <00:17:55.284>names, <00:17:55.564>stripping <00:17:55.844>out <00:17:56.125>comments,

378
00:17:56.965 --> 00:18:00.845
<00:17:56.965>stripping <00:17:57.139>out <00:17:57.314>spaces, <00:17:57.490>everything <00:17:57.665>that <00:17:57.840>we <00:17:58.014>can <00:17:58.189>reduce <00:17:58.365>so

379
00:18:00.845 --> 00:18:03.325
<00:18:00.845>that <00:18:01.078>the <00:18:01.311>code <00:18:01.545>is <00:18:01.778>functionally <00:18:02.011>equivalent, <00:18:02.245>um,

380
00:18:03.425 --> 00:18:04.925
<00:18:03.425>but <00:18:03.649>takes <00:18:03.875>up <00:18:04.100>a <00:18:04.325>lot <00:18:04.550>less <00:18:04.774>size.

381
00:18:05.065 --> 00:18:07.725
<00:18:05.065>So <00:18:05.220>here <00:18:05.376>you <00:18:05.531>can <00:18:05.687>see <00:18:05.842>the <00:18:05.998>function <00:18:06.153>name <00:18:06.309>is <00:18:06.465>preserved

382
00:18:08.145 --> 00:18:09.725
<00:18:08.145>but <00:18:08.495>for <00:18:08.845>the <00:18:09.195>variables <00:18:09.545>they've

383
00:18:09.725 --> 00:18:10.765
<00:18:09.725>been <00:18:09.912>dropped <00:18:10.099>to <00:18:10.286>a <00:18:10.473>single <00:18:10.661>letter.

384
00:18:10.815 --> 00:18:11.845
<00:18:10.815>We've <00:18:11.000>got <00:18:11.185>rid <00:18:11.371>of <00:18:11.556>the <00:18:11.742>comment

385
00:18:12.185 --> 00:18:13.365
<00:18:12.185>and <00:18:12.361>we've <00:18:12.539>got <00:18:12.716>rid <00:18:12.893>of <00:18:13.070>the <00:18:13.247>spaces.

386
00:18:14.265 --> 00:18:17.685
<00:18:14.265>So <00:18:14.420>the <00:18:14.576>code <00:18:14.731>now <00:18:14.887>is <00:18:15.042>20%, <00:18:15.198>25% <00:18:15.353>of <00:18:15.509>the <00:18:15.665>size,

387
00:18:18.105 --> 00:18:21.325
<00:18:18.105>but <00:18:18.245>it <00:18:18.385>still <00:18:18.525>works <00:18:18.665>exactly <00:18:18.805>the <00:18:18.945>same <00:18:19.085>way <00:18:19.225>as <00:18:19.365>JavaScript <00:18:19.505>does.

388
00:18:22.145 --> 00:18:24.205
<00:18:22.145>And <00:18:22.285>this <00:18:22.425>is <00:18:22.565>why <00:18:22.705>when <00:18:22.845>you <00:18:22.985>look <00:18:23.125>at <00:18:23.264>a <00:18:23.405>unified <00:18:23.545>file,

389
00:18:24.235 --> 00:18:26.085
<00:18:24.235>it's <00:18:24.514>very <00:18:24.794>hard <00:18:25.074>to <00:18:25.354>read <00:18:25.635>them

390
00:18:26.315 --> 00:18:28.885
<00:18:26.315>because <00:18:26.470>all <00:18:26.626>your <00:18:26.781>kind <00:18:26.937>of <00:18:27.092>variable <00:18:27.248>names <00:18:27.403>have <00:18:27.559>been <00:18:27.715>shortened,

391
00:18:29.025 --> 00:18:30.325
<00:18:29.025>all <00:18:29.317>the <00:18:29.610>spacing <00:18:29.902>have <00:18:30.195>gone.

392
00:18:30.905 --> 00:18:33.045
<00:18:30.905>Um, <00:18:31.080>but <00:18:31.254>this <00:18:31.430>is <00:18:31.605>just <00:18:31.780>a <00:18:31.955>way <00:18:32.129>of <00:18:32.305>saying,

393
00:18:33.045 --> 00:18:34.925
<00:18:33.045>well <00:18:33.278>actually <00:18:33.511>the <00:18:33.745>machine <00:18:33.978>doesn't <00:18:34.211>need <00:18:34.445>all

394
00:18:34.925 --> 00:18:38.365
<00:18:34.925>that <00:18:35.080>extra <00:18:35.236>information, <00:18:35.391>it <00:18:35.547>just <00:18:35.702>needs <00:18:35.858>the <00:18:36.013>raw <00:18:36.169>code <00:18:36.325>itself.

395
00:18:40.145 --> 00:18:41.925
<00:18:40.145>So <00:18:40.425>how <00:18:40.705>do <00:18:40.985>we <00:18:41.264>optimize <00:18:41.545>this

396
00:18:41.985 --> 00:18:44.565
<00:18:41.985>or <00:18:42.112>maybe <00:18:42.239>look, <00:18:42.366>we'll <00:18:42.494>look <00:18:42.621>on <00:18:42.748>the <00:18:42.875>flip <00:18:43.003>side <00:18:43.130>of <00:18:43.257>saying, <00:18:43.385>well

397
00:18:44.565 --> 00:18:46.485
<00:18:44.565>what <00:18:45.265>breaks <00:18:45.965>optimization?

398
00:18:48.945 --> 00:18:51.085
<00:18:48.945>So <00:18:49.225>quite <00:18:49.504>a <00:18:49.784>common <00:18:50.064>one <00:18:50.345>which

399
00:18:51.945 --> 00:18:53.965
<00:18:51.945>can <00:18:52.178>catch <00:18:52.411>you <00:18:52.645>out <00:18:52.878>is <00:18:53.111>class <00:18:53.345>properties.

400
00:18:54.755 --> 00:18:56.725
<00:18:54.755>Because <00:18:55.035>even <00:18:55.315>if <00:18:55.595>you're <00:18:55.875>using <00:18:56.155>TypeScript

401
00:18:56.785 --> 00:18:59.285
<00:18:56.785>and <00:18:56.940>you <00:18:57.096>say, <00:18:57.251>well <00:18:57.407>this <00:18:57.562>is <00:18:57.718>a <00:18:57.873>public <00:18:58.029>property, <00:18:58.185>uh,

402
00:18:59.425 --> 00:19:01.845
<00:18:59.425>say <00:18:59.565>the <00:18:59.705>column, <00:18:59.845>well <00:18:59.985>the <00:19:00.125>rows <00:19:00.264>are <00:19:00.405>here <00:19:00.544>is <00:19:00.685>a <00:19:00.825>private

403
00:19:02.165 --> 00:19:03.205
<00:19:02.165>property, <00:19:02.476>columns <00:19:02.789>is <00:19:03.101>public.

404
00:19:05.895 --> 00:19:09.155
<00:19:05.895>The <00:19:06.128>TypeScript <00:19:06.361>private <00:19:06.595>variable <00:19:06.828>doesn't <00:19:07.061>actually <00:19:07.295>mean

405
00:19:09.155 --> 00:19:11.075
<00:19:09.155>that <00:19:09.435>property <00:19:09.715>is <00:19:09.995>private <00:19:10.274>in <00:19:10.555>JavaScript.

406
00:19:12.775 --> 00:19:16.035
<00:19:12.775>So <00:19:12.930>when <00:19:13.086>that <00:19:13.241>code <00:19:13.397>is <00:19:13.552>uh, <00:19:13.708>minified, <00:19:13.863>you <00:19:14.019>still <00:19:14.175>need

407
00:19:16.035 --> 00:19:17.595
<00:19:16.035>to <00:19:16.385>maintain <00:19:16.735>those <00:19:17.085>full <00:19:17.435>names

408
00:19:18.505 --> 00:19:21.155
<00:19:18.505>because <00:19:18.645>say <00:19:18.785>we <00:19:18.925>did <00:19:19.065>this, <00:19:19.205>say <00:19:19.345>we <00:19:19.485>had <00:19:19.625>this <00:19:19.765>class <00:19:19.905>property,

409
00:19:21.375 --> 00:19:22.795
<00:19:21.375>say <00:19:21.694>Rose <00:19:22.014>and <00:19:22.333>it's <00:19:22.653>private.

410
00:19:23.455 --> 00:19:25.395
<00:19:23.455>And <00:19:23.655>then <00:19:23.855>in <00:19:24.054>another <00:19:24.254>function <00:19:24.455>we <00:19:24.655>use <00:19:24.855>that,

411
00:19:26.075 --> 00:19:29.875
<00:19:26.075>I <00:19:26.215>mean <00:19:26.355>this <00:19:26.495>is <00:19:26.635>valid <00:19:26.775>JavaScript, <00:19:26.915>you <00:19:27.055>could <00:19:27.195>have <00:19:27.335>grid <00:19:27.475>row

412
00:19:29.895 --> 00:19:31.755
<00:19:29.895>and <00:19:30.070>you <00:19:30.245>could <00:19:30.420>be <00:19:30.595>pushing <00:19:30.770>rows <00:19:30.945>into <00:19:31.120>that <00:19:31.295>array.

413
00:19:32.995 --> 00:19:35.215
<00:19:32.995>If <00:19:33.195>inside <00:19:33.395>that <00:19:33.594>class <00:19:33.794>we <00:19:33.995>mangled <00:19:34.195>the <00:19:34.395>property,

414
00:19:35.275 --> 00:19:36.815
<00:19:35.275>so <00:19:35.473>we <00:19:35.671>just <00:19:35.869>shortened <00:19:36.067>it <00:19:36.265>to <00:19:36.463>an <00:19:36.661>R

415
00:19:36.835 --> 00:19:37.895
<00:19:36.835>or <00:19:37.073>the <00:19:37.312>bundler <00:19:37.550>did <00:19:37.789>this,

416
00:19:38.595 --> 00:19:41.295
<00:19:38.595>it <00:19:38.795>wouldn't <00:19:38.995>actually <00:19:39.195>know <00:19:39.395>about <00:19:39.595>the <00:19:39.795>other <00:19:39.995>use

417
00:19:41.865 --> 00:19:44.855
<00:19:41.865>where <00:19:42.065>it's <00:19:42.265>expecting <00:19:42.465>that <00:19:42.665>to <00:19:42.865>be <00:19:43.065>rose <00:19:43.265>still.

418
00:19:45.395 --> 00:19:47.455
<00:19:45.395>So <00:19:45.595>the <00:19:45.795>code <00:19:45.995>would <00:19:46.195>be <00:19:46.395>completely <00:19:46.595>broken <00:19:46.795>here.

419
00:19:48.035 --> 00:19:50.455
<00:19:48.035>So <00:19:48.268>this <00:19:48.501>is <00:19:48.735>why <00:19:48.968>class <00:19:49.201>properties <00:19:49.435>public

420
00:19:50.475 --> 00:19:53.575
<00:19:50.475>or <00:19:50.675>private <00:19:50.875>in <00:19:51.074>Typescripts, <00:19:51.274>you <00:19:51.475>can't <00:19:51.675>mangle <00:19:51.875>them

421
00:19:53.725 --> 00:19:56.415
<00:19:53.725>because <00:19:53.880>they <00:19:54.036>might <00:19:54.191>be <00:19:54.347>accessed <00:19:54.502>somewhere <00:19:54.658>else <00:19:54.813>in <00:19:54.969>the <00:19:55.125>code.

422
00:19:59.655 --> 00:20:00.835
<00:19:59.655>So <00:19:59.831>yeah, <00:20:00.009>so <00:20:00.186>they <00:20:00.363>don't <00:20:00.540>do <00:20:00.717>it,

423
00:20:01.975 --> 00:20:05.855
<00:20:01.975>but <00:20:02.130>what <00:20:02.286>if <00:20:02.441>we <00:20:02.597>knew <00:20:02.752>that <00:20:02.908>they <00:20:03.063>weren't <00:20:03.219>accessed <00:20:03.375>outside

424
00:20:05.855 --> 00:20:08.255
<00:20:05.855>of <00:20:06.088>the <00:20:06.321>class <00:20:06.555>And <00:20:06.788>this <00:20:07.021>is <00:20:07.255>something

425
00:20:08.255 --> 00:20:09.935
<00:20:08.255>that <00:20:08.535>we <00:20:08.815>can <00:20:09.095>actually <00:20:09.375>do <00:20:09.655>now.

426
00:20:10.035 --> 00:20:13.495
<00:20:10.035>So <00:20:10.210>the <00:20:10.385>private <00:20:10.560>properties <00:20:10.735>in <00:20:10.910>JavaScript <00:20:11.085>with <00:20:11.260>this, <00:20:11.435>uh,

427
00:20:13.495 --> 00:20:17.815
<00:20:13.495>like <00:20:13.669>the <00:20:13.844>hash <00:20:14.020>symbol, <00:20:14.195>it <00:20:14.370>actually <00:20:14.544>enforces <00:20:14.719>that <00:20:14.895>private

428
00:20:18.395 --> 00:20:22.855
<00:20:18.395>um, <00:20:18.628>kind <00:20:18.861>of <00:20:19.095>restriction <00:20:19.328>in <00:20:19.561>JavaScript <00:20:19.795>itself.

429
00:20:23.475 --> 00:20:25.055
<00:20:23.475>So <00:20:23.708>it's <00:20:23.941>not <00:20:24.175>just <00:20:24.408>a <00:20:24.641>TypeScript <00:20:24.875>thing,

430
00:20:25.165 --> 00:20:26.775
<00:20:25.165>it's <00:20:25.514>a <00:20:25.865>a <00:20:26.215>JavaScript <00:20:26.565>thing.

431
00:20:27.315 --> 00:20:32.175
<00:20:27.315>So <00:20:27.442>here <00:20:27.569>if <00:20:27.696>we <00:20:27.824>define <00:20:27.951>the <00:20:28.078>rows <00:20:28.205>as <00:20:28.333>a <00:20:28.460>properly <00:20:28.587>private <00:20:28.715>variable

432
00:20:32.885 --> 00:20:35.495
<00:20:32.885>that <00:20:33.085>can <00:20:33.285>be <00:20:33.485>safely <00:20:33.685>mangled <00:20:33.885>by <00:20:34.085>the <00:20:34.285>BUNDLER

433
00:20:35.565 --> 00:20:36.855
<00:20:35.565>because <00:20:36.145>it <00:20:36.726>knows

434
00:20:36.855 --> 00:20:39.375
<00:20:36.855>that <00:20:37.030>well <00:20:37.205>wherever <00:20:37.380>this <00:20:37.555>is <00:20:37.730>used <00:20:37.905>within <00:20:38.080>this <00:20:38.255>class,

435
00:20:40.055 --> 00:20:43.575
<00:20:40.055>I <00:20:40.210>can <00:20:40.366>shorten <00:20:40.521>it <00:20:40.677>because <00:20:40.832>this <00:20:40.988>property <00:20:41.143>cannot <00:20:41.299>be <00:20:41.455>accessed

436
00:20:43.685 --> 00:20:44.895
<00:20:43.685>from <00:20:43.957>outside <00:20:44.229>of <00:20:44.501>the <00:20:44.774>class.

437
00:20:45.855 --> 00:20:47.325
<00:20:45.855>So <00:20:46.075>this <00:20:46.296>is <00:20:46.516>a <00:20:46.737>really <00:20:46.957>great <00:20:47.178>way,

438
00:20:47.815 --> 00:20:49.525
<00:20:47.815>especially <00:20:48.048>if <00:20:48.281>you've <00:20:48.515>got <00:20:48.748>classes <00:20:48.981>with <00:20:49.215>lots

439
00:20:49.525 --> 00:20:51.965
<00:20:49.525>of <00:20:49.680>big <00:20:49.836>property <00:20:49.991>names, <00:20:50.147>function <00:20:50.302>names <00:20:50.458>that <00:20:50.613>are <00:20:50.769>all <00:20:50.925>internal

440
00:20:51.965 --> 00:20:54.965
<00:20:51.965>to <00:20:52.165>that <00:20:52.365>class, <00:20:52.564>defining <00:20:52.764>them <00:20:52.965>with <00:20:53.165>prior <00:20:53.365>variables

441
00:20:55.505 --> 00:20:57.645
<00:20:55.505>can <00:20:55.738>really <00:20:55.971>shrink <00:20:56.205>your <00:20:56.438>bundle <00:20:56.671>size <00:20:56.905>down.

442
00:20:59.525 --> 00:21:03.745
<00:20:59.525>But <00:20:59.680>there <00:20:59.836>is <00:20:59.991>a <00:21:00.147>caveat <00:21:00.302>You <00:21:00.458>have <00:21:00.613>to <00:21:00.769>be <00:21:00.925>aware

443
00:21:03.965 --> 00:21:06.065
<00:21:03.965>of <00:21:04.245>when <00:21:04.524>these <00:21:04.804>were <00:21:05.084>actually <00:21:05.365>introduced

444
00:21:06.125 --> 00:21:08.425
<00:21:06.125>and <00:21:06.405>supported <00:21:06.685>by <00:21:06.965>the <00:21:07.245>ES <00:21:07.525>target

445
00:21:09.015 --> 00:21:11.785
<00:21:09.015>because <00:21:09.190>if <00:21:09.365>you <00:21:09.540>are <00:21:09.715>compiling <00:21:09.890>down <00:21:10.065>to <00:21:10.240>ES <00:21:10.415>2020,

446
00:21:12.485 --> 00:21:15.025
<00:21:12.485>you're <00:21:12.718>actually <00:21:12.951>gonna <00:21:13.185>increase <00:21:13.418>your <00:21:13.651>bundle <00:21:13.885>size

447
00:21:15.205 --> 00:21:16.865
<00:21:15.205>by <00:21:15.554>using <00:21:15.905>these <00:21:16.254>private <00:21:16.605>variables

448
00:21:17.735 --> 00:21:19.745
<00:21:17.735>because <00:21:17.935>it <00:21:18.135>then <00:21:18.334>has <00:21:18.534>to <00:21:18.735>poly <00:21:18.935>fill <00:21:19.135>them.

449
00:21:20.645 --> 00:21:25.025
<00:21:20.645>So <00:21:20.772>make <00:21:20.899>sure <00:21:21.026>that <00:21:21.154>if <00:21:21.281>you <00:21:21.408>are <00:21:21.535>wanting <00:21:21.663>to <00:21:21.790>use <00:21:21.917>this <00:21:22.045>approach,

450
00:21:25.605 --> 00:21:28.985
<00:21:25.605>you <00:21:25.760>are <00:21:25.916>targeting, <00:21:26.071>I <00:21:26.227>think <00:21:26.382>it's <00:21:26.538>ES <00:21:26.693>2022, <00:21:26.849>um, <00:21:27.005>so

451
00:21:28.985 --> 00:21:31.785
<00:21:28.985>that <00:21:29.185>you <00:21:29.385>avoid <00:21:29.584>this <00:21:29.784>both <00:21:29.985>bundle <00:21:30.185>size <00:21:30.385>increase

452
00:21:31.805 --> 00:21:34.185
<00:21:31.805>and <00:21:32.085>also <00:21:32.365>a <00:21:32.645>performance <00:21:32.925>uh, <00:21:33.205>increase.

453
00:21:34.245 --> 00:21:36.585
<00:21:34.245>You <00:21:34.361>know, <00:21:34.478>the <00:21:34.594>use <00:21:34.711>of <00:21:34.828>the <00:21:34.945>weak <00:21:35.061>map <00:21:35.178>there <00:21:35.294>is <00:21:35.411>a <00:21:35.528>lot <00:21:35.645>slower,

454
00:21:37.245 --> 00:21:38.705
<00:21:37.245>so <00:21:37.683>just <00:21:38.120>be <00:21:38.559>careful.

455
00:21:39.675 --> 00:21:41.575
<00:21:39.675>So <00:21:40.024>yeah, <00:21:40.375>so <00:21:40.725>Target, <00:21:41.075>um,

456
00:21:43.315 --> 00:21:44.695
<00:21:43.315>oh <00:21:43.563>these <00:21:43.811>are <00:21:44.060>down <00:21:44.308>leveling <00:21:44.557>triggers.

457
00:21:44.695 --> 00:21:48.095
<00:21:44.695>Yeah, <00:21:44.822>say <00:21:44.949>if <00:21:45.076>you <00:21:45.204>are <00:21:45.331>20, <00:21:45.458>23 <00:21:45.585>or <00:21:45.713>below, <00:21:45.840>don't <00:21:45.967>use <00:21:46.095>them.

458
00:21:48.755 --> 00:21:51.055
<00:21:48.755>If <00:21:48.988>your <00:21:49.221>browser <00:21:49.455>list <00:21:49.688>supports <00:21:49.921>Safari <00:21:50.155>16

459
00:21:51.155 --> 00:21:54.175
<00:21:51.155>and <00:21:51.310>you're <00:21:51.466>using <00:21:51.621>ES <00:21:51.777>build, <00:21:51.932>there's <00:21:52.088>some <00:21:52.243>edge <00:21:52.399>cases <00:21:52.555>here.

460
00:21:54.715 --> 00:21:56.535
<00:21:54.715>If <00:21:54.995>you're <00:21:55.274>using <00:21:55.554>Angular <00:21:55.834>version <00:21:56.115>19

461
00:21:56.535 --> 00:21:58.575
<00:21:56.535>with <00:21:56.710>a <00:21:56.885>default <00:21:57.060>browser <00:21:57.235>list, <00:21:57.410>that's <00:21:57.585>good <00:21:57.760>to <00:21:57.935>go.

462
00:21:58.795 --> 00:22:00.095
<00:21:58.795>So <00:21:59.029>and <00:21:59.263>also <00:21:59.497>version <00:21:59.731>20 <00:21:59.965>now,

463
00:22:01.555 --> 00:22:05.015
<00:22:01.555>but <00:22:01.671>again, <00:22:01.788>it <00:22:01.905>comes <00:22:02.021>back <00:22:02.138>to <00:22:02.255>this <00:22:02.371>thing, <00:22:02.488>try <00:22:02.605>it <00:22:02.721>out <00:22:02.838>but <00:22:02.955>check

464
00:22:05.555 --> 00:22:08.335
<00:22:05.555>and <00:22:05.730>see <00:22:05.905>what's <00:22:06.080>actually <00:22:06.255>happening <00:22:06.430>in <00:22:06.605>your <00:22:06.780>output <00:22:06.955>file

465
00:22:10.555 --> 00:22:12.735
<00:22:10.555>And <00:22:10.788>let's <00:22:11.021>run <00:22:11.255>through <00:22:11.488>some <00:22:11.721>more <00:22:11.955>optimizations.

466
00:22:14.035 --> 00:22:15.335
<00:22:14.035>So <00:22:14.269>you <00:22:14.503>might <00:22:14.737>have <00:22:14.971>seen <00:22:15.205>this

467
00:22:15.335 --> 00:22:17.895
<00:22:15.335>with <00:22:15.475>React <00:22:15.615>probably <00:22:15.755>when <00:22:15.895>you <00:22:16.035>have <00:22:16.175>an <00:22:16.315>error <00:22:16.455>in <00:22:16.595>production <00:22:16.735>you

468
00:22:17.895 --> 00:22:18.895
<00:22:17.895>just <00:22:18.195>get <00:22:18.495>a <00:22:18.795>code,

469
00:22:19.755 --> 00:22:22.215
<00:22:19.755>but <00:22:19.955>then <00:22:20.155>if <00:22:20.355>you're <00:22:20.555>using <00:22:20.755>the <00:22:20.955>development <00:22:21.155>environment,

470
00:22:22.235 --> 00:22:24.895
<00:22:22.235>it <00:22:22.375>gives <00:22:22.514>you <00:22:22.655>all <00:22:22.794>the, <00:22:22.935>the <00:22:23.074>kind <00:22:23.215>of <00:22:23.354>extra <00:22:23.495>text <00:22:23.635>there.

471
00:22:25.195 --> 00:22:27.095
<00:22:25.195>So <00:22:25.335>this <00:22:25.475>is <00:22:25.615>something <00:22:25.754>we've <00:22:25.895>done <00:22:26.034>for <00:22:26.175>a <00:22:26.314>grid <00:22:26.455>as <00:22:26.595>well.

472
00:22:27.155 --> 00:22:29.135
<00:22:27.155>We <00:22:27.355>used <00:22:27.555>to <00:22:27.754>have <00:22:27.955>these <00:22:28.155>helpful <00:22:28.355>dev <00:22:28.555>messages.

473
00:22:29.755 --> 00:22:32.055
<00:22:29.755>So <00:22:29.930>instead <00:22:30.105>of <00:22:30.280>that <00:22:30.455>we've <00:22:30.630>now <00:22:30.805>swapped <00:22:30.980>them <00:22:31.155>out

474
00:22:32.075 --> 00:22:33.495
<00:22:32.075>for <00:22:32.714>number <00:22:33.352>codes

475
00:22:34.075 --> 00:22:38.295
<00:22:34.075>and <00:22:34.215>then <00:22:34.355>you <00:22:34.495>can <00:22:34.635>provide <00:22:34.775>a <00:22:34.915>validations <00:22:35.055>module <00:22:35.195>in <00:22:35.335>in <00:22:35.475>dev

476
00:22:38.325 --> 00:22:40.775
<00:22:38.325>mode, <00:22:38.525>which <00:22:38.725>then <00:22:38.925>actually <00:22:39.125>has <00:22:39.325>all <00:22:39.525>the <00:22:39.725>information,

477
00:22:40.775 --> 00:22:43.095
<00:22:40.775>otherwise <00:22:40.950>it <00:22:41.125>just <00:22:41.300>links <00:22:41.475>you <00:22:41.650>off <00:22:41.825>to <00:22:42.000>a <00:22:42.175>link.

478
00:22:43.795 --> 00:22:47.335
<00:22:43.795>So <00:22:43.935>this <00:22:44.075>is <00:22:44.215>a <00:22:44.355>good <00:22:44.495>way <00:22:44.635>of <00:22:44.775>having <00:22:44.915>that <00:22:45.055>same <00:22:45.195>usability

479
00:22:47.755 --> 00:22:50.655
<00:22:47.755>and <00:22:47.988>having <00:22:48.221>I <00:22:48.455>guess <00:22:48.688>good <00:22:48.921>error <00:22:49.155>messages

480
00:22:50.915 --> 00:22:53.975
<00:22:50.915>but <00:22:51.070>without <00:22:51.226>increasing <00:22:51.381>the <00:22:51.537>bundle <00:22:51.692>size <00:22:51.848>for <00:22:52.003>all <00:22:52.159>the <00:22:52.315>kind

481
00:22:53.975 --> 00:22:56.495
<00:22:53.975>of <00:22:54.130>happy <00:22:54.286>use <00:22:54.441>cases <00:22:54.597>which <00:22:54.752>aren't <00:22:54.908>gonna <00:22:55.063>hit <00:22:55.219>the <00:22:55.375>errors.

482
00:22:58.315 --> 00:23:00.095
<00:22:58.315>And <00:22:58.490>there's <00:22:58.665>different <00:22:58.840>ways <00:22:59.015>that <00:22:59.190>you <00:22:59.365>can <00:22:59.540>achieve <00:22:59.715>this.

483
00:23:00.275 --> 00:23:04.615
<00:23:00.275>Um, <00:23:00.391>so <00:23:00.508>a <00:23:00.625>lot <00:23:00.741>of <00:23:00.858>the <00:23:00.975>build <00:23:01.091>tools <00:23:01.208>they <00:23:01.325>have <00:23:01.441>like <00:23:01.558>drop <00:23:01.675>labels

484
00:23:04.795 --> 00:23:07.775
<00:23:04.795>or <00:23:04.970>you <00:23:05.145>can <00:23:05.320>provide <00:23:05.495>a <00:23:05.670>um, <00:23:05.845>a <00:23:06.020>static <00:23:06.195>kind

485
00:23:07.775 --> 00:23:09.175
<00:23:07.775>of <00:23:08.195>variable <00:23:08.615>like <00:23:09.034>debug

486
00:23:09.475 --> 00:23:10.735
<00:23:09.475>and <00:23:09.701>so <00:23:09.928>then <00:23:10.155>the <00:23:10.382>bundler <00:23:10.609>knows,

487
00:23:10.735 --> 00:23:12.695
<00:23:10.735>well <00:23:10.968>this <00:23:11.201>code <00:23:11.435>when <00:23:11.668>I'm <00:23:11.901>building <00:23:12.135>it,

488
00:23:12.885 --> 00:23:15.415
<00:23:12.885>this <00:23:13.085>flag <00:23:13.285>is <00:23:13.485>always <00:23:13.685>like <00:23:13.885>true <00:23:14.085>or <00:23:14.285>false

489
00:23:15.915 --> 00:23:18.735
<00:23:15.915>and <00:23:16.115>it <00:23:16.315>can <00:23:16.514>tree <00:23:16.715>shake <00:23:16.915>that <00:23:17.115>code <00:23:17.315>away.

490
00:23:21.235 --> 00:23:23.245
<00:23:21.235>This <00:23:21.514>is <00:23:21.794>another <00:23:22.074>interesting <00:23:22.354>kind <00:23:22.635>of

491
00:23:23.805 --> 00:23:27.325
<00:23:23.805>approach <00:23:23.945>which <00:23:24.085>across <00:23:24.225>a <00:23:24.365>whole <00:23:24.505>code <00:23:24.645>base <00:23:24.785>can <00:23:24.925>actually <00:23:25.065>add <00:23:25.205>up

492
00:23:27.325 --> 00:23:28.645
<00:23:27.325>to <00:23:27.721>some <00:23:28.117>meaningful <00:23:28.513>differences.

493
00:23:29.545 --> 00:23:32.485
<00:23:29.545>So <00:23:29.700>here <00:23:29.856>we've <00:23:30.011>got <00:23:30.167>a <00:23:30.322>class <00:23:30.478>where <00:23:30.633>we're <00:23:30.789>accessing <00:23:30.945>this,

494
00:23:32.925 --> 00:23:36.165
<00:23:32.925>I <00:23:33.100>guess <00:23:33.274>this <00:23:33.450>CSS <00:23:33.625>class <00:23:33.800>manager <00:23:33.975>off <00:23:34.149>this <00:23:34.325>property

495
00:23:37.305 --> 00:23:39.325
<00:23:37.305>and <00:23:37.505>so <00:23:37.705>that <00:23:37.905>property <00:23:38.105>can't <00:23:38.305>really <00:23:38.505>be <00:23:38.705>mangled.

496
00:23:39.645 --> 00:23:40.885
<00:23:39.645>I <00:23:39.831>guess <00:23:40.017>this <00:23:40.203>is <00:23:40.389>the <00:23:40.575>case <00:23:40.761>where,

497
00:23:40.885 --> 00:23:44.005
<00:23:40.885>well <00:23:41.012>if <00:23:41.139>it <00:23:41.266>was <00:23:41.394>using <00:23:41.521>a <00:23:41.648>private <00:23:41.775>variable <00:23:41.903>then <00:23:42.030>it <00:23:42.157>would <00:23:42.285>be,

498
00:23:44.225 --> 00:23:45.885
<00:23:44.225>you <00:23:44.425>know, <00:23:44.625>mangled, <00:23:44.824>but <00:23:45.024>you'd <00:23:45.225>still <00:23:45.425>have <00:23:45.625>the

499
00:23:46.165 --> 00:23:47.445
<00:23:46.165>repeated <00:23:46.741>this <00:23:47.317>keyword.

500
00:23:48.835 --> 00:23:50.215
<00:23:48.835>But <00:23:49.083>if <00:23:49.331>we <00:23:49.580>actually <00:23:49.828>pass <00:23:50.077>that

501
00:23:51.455 --> 00:23:55.015
<00:23:51.455>CSS <00:23:51.595>class <00:23:51.735>manager <00:23:51.875>into <00:23:52.014>the <00:23:52.155>function <00:23:52.294>now <00:23:52.435>it's <00:23:52.574>just <00:23:52.715>a <00:23:52.855>variable

502
00:23:55.595 --> 00:23:59.575
<00:23:55.595>and <00:23:55.735>that <00:23:55.875>can <00:23:56.015>be <00:23:56.155>shortened <00:23:56.295>and <00:23:56.435>minified, <00:23:56.575>um, <00:23:56.715>in <00:23:56.855>that <00:23:56.995>way.

503
00:23:59.755 --> 00:24:00.815
<00:23:59.755>So <00:23:59.993>it's <00:24:00.232>actually <00:24:00.470>then <00:24:00.709>leads

504
00:24:00.815 --> 00:24:03.575
<00:24:00.815>to <00:24:01.015>a <00:24:01.215>40% <00:24:01.415>saving <00:24:01.615>when <00:24:01.815>you're <00:24:02.015>minifying <00:24:02.215>it.

505
00:24:06.745 --> 00:24:08.715
<00:24:06.745>Another <00:24:06.945>approach <00:24:07.145>you <00:24:07.344>can <00:24:07.544>take <00:24:07.745>is <00:24:07.945>this <00:24:08.145>kind

506
00:24:08.715 --> 00:24:13.195
<00:24:08.715>of <00:24:08.870>inversion <00:24:09.026>principle <00:24:09.181>where <00:24:09.337>we <00:24:09.492>had <00:24:09.648>this <00:24:09.803>grid <00:24:09.959>option <00:24:10.115>service

507
00:24:13.735 --> 00:24:16.475
<00:24:13.735>and <00:24:13.862>it <00:24:13.989>had <00:24:14.116>a <00:24:14.244>property <00:24:14.371>on <00:24:14.498>it <00:24:14.625>called <00:24:14.753>add <00:24:14.880>the <00:24:15.007>grid <00:24:15.135>API.

508
00:24:16.495 --> 00:24:19.435
<00:24:16.495>So <00:24:16.635>whenever <00:24:16.774>the <00:24:16.915>prams <00:24:17.054>are <00:24:17.195>being <00:24:17.334>sent <00:24:17.475>out, <00:24:17.614>it <00:24:17.754>would <00:24:17.895>run

509
00:24:19.435 --> 00:24:21.555
<00:24:19.435>through <00:24:19.610>this <00:24:19.784>function <00:24:19.960>and <00:24:20.135>add <00:24:20.310>the <00:24:20.485>API <00:24:20.659>to <00:24:20.835>it.

510
00:24:23.185 --> 00:24:25.245
<00:24:23.185>But <00:24:23.360>what <00:24:23.534>this <00:24:23.710>means <00:24:23.885>is <00:24:24.060>that <00:24:24.235>you've <00:24:24.409>also <00:24:24.585>got,

511
00:24:25.385 --> 00:24:26.605
<00:24:25.385>if <00:24:25.541>this <00:24:25.698>is <00:24:25.855>used <00:24:26.012>in <00:24:26.169>lots <00:24:26.326>of <00:24:26.483>places,

512
00:24:26.605 --> 00:24:29.805
<00:24:26.605>you've <00:24:26.745>got <00:24:26.885>this <00:24:27.025>GOS <00:24:27.165>grid <00:24:27.305>option <00:24:27.445>service <00:24:27.585>add, <00:24:27.725>the <00:24:27.865>grid, <00:24:28.005>API,

513
00:24:30.625 --> 00:24:33.045
<00:24:30.625>and <00:24:30.905>that <00:24:31.185>can't <00:24:31.465>actually <00:24:31.745>be <00:24:32.025>shortened

514
00:24:33.045 --> 00:24:34.325
<00:24:33.045>because <00:24:33.429>that <00:24:33.813>function <00:24:34.197>is,

515
00:24:34.965 --> 00:24:36.445
<00:24:34.965>I <00:24:35.187>mean <00:24:35.408>public <00:24:35.630>and <00:24:35.852>it's <00:24:36.074>always <00:24:36.297>there.

516
00:24:37.625 --> 00:24:39.045
<00:24:37.625>But <00:24:37.838>if <00:24:38.051>you <00:24:38.264>create <00:24:38.477>this <00:24:38.690>helper <00:24:38.903>function,

517
00:24:39.135 --> 00:24:41.685
<00:24:39.135>which <00:24:39.310>takes <00:24:39.485>the <00:24:39.660>grid <00:24:39.835>option <00:24:40.010>service <00:24:40.185>and <00:24:40.360>the <00:24:40.535>parameters

518
00:24:41.685 --> 00:24:44.365
<00:24:41.685>and <00:24:41.918>then <00:24:42.151>calls <00:24:42.385>that <00:24:42.618>same <00:24:42.851>method, <00:24:43.085>that

519
00:24:44.475 --> 00:24:46.085
<00:24:44.475>that <00:24:44.824>function <00:24:45.175>can <00:24:45.524>be <00:24:45.875>ified

520
00:24:46.085 --> 00:24:47.405
<00:24:46.085>because <00:24:46.481>the <00:24:46.877>bundler <00:24:47.273>knows

521
00:24:47.435 --> 00:24:49.325
<00:24:47.435>that <00:24:47.668>I've <00:24:47.901>got <00:24:48.135>all <00:24:48.368>those <00:24:48.601>different <00:24:48.835>references

522
00:24:49.745 --> 00:24:50.885
<00:24:49.745>and <00:24:49.950>I <00:24:50.155>can <00:24:50.360>shorten <00:24:50.565>them <00:24:50.771>all.

523
00:24:53.595 --> 00:24:56.885
<00:24:53.595>Another <00:24:53.795>one, <00:24:53.995>which <00:24:54.195>Again <00:24:54.395>is <00:24:54.595>a <00:24:54.795>tiny <00:24:54.995>change

524
00:24:57.545 --> 00:24:59.845
<00:24:57.545>and <00:24:57.700>then <00:24:57.856>maybe <00:24:58.011>this <00:24:58.167>might <00:24:58.322>be <00:24:58.478>a <00:24:58.633>slightly <00:24:58.789>more <00:24:58.945>controversial

525
00:24:59.845 --> 00:25:03.285
<00:24:59.845>one, <00:24:59.985>if <00:25:00.125>you <00:25:00.265>start <00:25:00.405>applying <00:25:00.545>it <00:25:00.685>across <00:25:00.825>your <00:25:00.965>code <00:25:01.105>bases <00:25:01.245>is

526
00:25:03.285 --> 00:25:05.765
<00:25:03.285>where <00:25:03.485>you <00:25:03.685>have <00:25:03.885>these <00:25:04.085>temporary <00:25:04.285>kind <00:25:04.485>of <00:25:04.685>variables.

527
00:25:05.785 --> 00:25:09.605
<00:25:05.785>So <00:25:05.960>we're <00:25:06.135>assigning <00:25:06.310>this <00:25:06.485>variable <00:25:06.660>first, <00:25:06.835>right, <00:25:07.010>pinned, <00:25:07.185>um,

528
00:25:09.985 --> 00:25:11.605
<00:25:09.985>and <00:25:10.159>but <00:25:10.334>we're <00:25:10.510>only <00:25:10.685>using <00:25:10.860>it <00:25:11.034>in <00:25:11.209>one <00:25:11.385>place.

529
00:25:12.505 --> 00:25:15.325
<00:25:12.505>So <00:25:12.680>in <00:25:12.855>this <00:25:13.030>case, <00:25:13.205>just <00:25:13.380>in <00:25:13.555>lining <00:25:13.730>it <00:25:13.905>led

530
00:25:15.325 --> 00:25:16.685
<00:25:15.325>to <00:25:15.631>about <00:25:15.937>a <00:25:16.243>15% <00:25:16.549>smaller.

531
00:25:17.425 --> 00:25:19.165
<00:25:17.425>But <00:25:17.625>this <00:25:17.825>one <00:25:18.024>I <00:25:18.225>can <00:25:18.425>definitely <00:25:18.625>see <00:25:18.825>is

532
00:25:19.445 --> 00:25:20.485
<00:25:19.445>slightly <00:25:19.913>more <00:25:20.380>controversial.

533
00:25:20.665 --> 00:25:22.845
<00:25:20.665>And <00:25:20.805>if <00:25:20.945>you <00:25:21.085>start <00:25:21.225>doing <00:25:21.365>this <00:25:21.504>across <00:25:21.645>your <00:25:21.784>whole <00:25:21.925>code <00:25:22.065>base,

534
00:25:23.345 --> 00:25:25.765
<00:25:23.345>people <00:25:23.520>might <00:25:23.695>say, <00:25:23.870>well <00:25:24.045>the <00:25:24.220>readability <00:25:24.395>has <00:25:24.570>gone <00:25:24.745>down,

535
00:25:25.865 --> 00:25:28.445
<00:25:25.865>so <00:25:26.098>don't <00:25:26.331>be <00:25:26.565>angry <00:25:26.798>about <00:25:27.031>this <00:25:27.265>one.

536
00:25:28.905 --> 00:25:30.325
<00:25:28.905>I'm <00:25:29.160>just <00:25:29.416>saying <00:25:29.671>it's <00:25:29.927>an <00:25:30.183>option.

537
00:25:34.305 --> 00:25:36.765
<00:25:34.305>And <00:25:34.585>yes, <00:25:34.865>this <00:25:35.145>is <00:25:35.425>quite <00:25:35.705>tedious,

538
00:25:37.345 --> 00:25:39.005
<00:25:37.345>but <00:25:37.545>it <00:25:37.745>depends <00:25:37.945>what <00:25:38.145>you <00:25:38.345>want <00:25:38.545>to <00:25:38.745>achieve

539
00:25:39.265 --> 00:25:41.765
<00:25:39.265>and <00:25:39.498>where <00:25:39.731>you <00:25:39.965>are, <00:25:40.198>what <00:25:40.431>you're <00:25:40.665>prioritizing.

540
00:25:41.945 --> 00:25:45.565
<00:25:41.945>So <00:25:42.044>this <00:25:42.145>is <00:25:42.245>up <00:25:42.345>to <00:25:42.445>you <00:25:42.544>to <00:25:42.645>work <00:25:42.745>out <00:25:42.845>how <00:25:42.945>much <00:25:43.044>you <00:25:43.145>want <00:25:43.245>to <00:25:43.345>do

541
00:25:47.665 --> 00:25:49.845
<00:25:47.665>and <00:25:47.865>then <00:25:48.065>we'll <00:25:48.264>quickly <00:25:48.465>just <00:25:48.665>have <00:25:48.865>a <00:25:49.065>look.

542
00:25:49.845 --> 00:25:52.245
<00:25:49.845>Different <00:25:50.045>build <00:25:50.245>tools, <00:25:50.445>they <00:25:50.645>have <00:25:50.845>different <00:25:51.045>build <00:25:51.245>speeds

543
00:25:52.245 --> 00:25:54.165
<00:25:52.245>and <00:25:52.478>they <00:25:52.711>also <00:25:52.945>have <00:25:53.178>different <00:25:53.411>bundle <00:25:53.645>size

544
00:25:54.625 --> 00:25:56.725
<00:25:54.625>and <00:25:55.091>tree <00:25:55.558>shaking <00:25:56.025>capabilities.

545
00:25:57.465 --> 00:25:59.245
<00:25:57.465>So <00:25:57.745>investigate <00:25:58.024>the <00:25:58.304>different <00:25:58.584>build <00:25:58.865>tools

546
00:25:59.305 --> 00:26:00.325
<00:25:59.305>for <00:25:59.764>your <00:26:00.223>application.

547
00:26:02.235 --> 00:26:04.655
<00:26:02.235>And <00:26:02.409>then <00:26:02.584>finally <00:26:02.760>maybe <00:26:02.935>actually <00:26:03.110>changing <00:26:03.284>the <00:26:03.459>way <00:26:03.635>it's

548
00:26:04.655 --> 00:26:06.775
<00:26:04.655>compressed <00:26:04.855>could <00:26:05.055>have <00:26:05.254>a <00:26:05.455>big <00:26:05.655>impact <00:26:05.855>as <00:26:06.055>well.

549
00:26:06.915 --> 00:26:08.215
<00:26:06.915>So <00:26:07.304>G <00:26:07.695>or <00:26:08.085>broccoli.

550
00:26:08.215 --> 00:26:10.535
<00:26:08.215>So <00:26:08.415>again, <00:26:08.615>do <00:26:08.814>a <00:26:09.014>little <00:26:09.215>bit <00:26:09.415>of <00:26:09.615>experimentation

551
00:26:10.555 --> 00:26:12.095
<00:26:10.555>and <00:26:10.709>see <00:26:10.863>if <00:26:11.017>that <00:26:11.171>can <00:26:11.325>help <00:26:11.479>you <00:26:11.633>out <00:26:11.787>as <00:26:11.941>well.

552
00:26:14.105 --> 00:26:16.805
<00:26:14.105>So <00:26:14.260>yeah, <00:26:14.416>so <00:26:14.571>with <00:26:14.727>that <00:26:14.882>I <00:26:15.038>encourage <00:26:15.193>you <00:26:15.349>to <00:26:15.505>go

553
00:26:16.805 --> 00:26:17.885
<00:26:16.805>and <00:26:17.129>shrink <00:26:17.453>through <00:26:17.777>applications.