Making JavaScript Faster

To make our site even faster, 0:00 let's take advantage of some tools we looked at in previous videos. 0:02 And some new ones to build a Gulp pipeline resource that will minify these resources 0:06 to their smallest footprint possible. 0:11 Getting started, I moved all of our resources into a source directory and 0:14 then our Gulp script will make a dist directory where it'll 0:18 put our processed files from the Gulp pipeline. 0:20 Let's add our first Gulp task. 0:24 This will process our CSS file to be an inline resource. 0:25 Then we need to update our HTML as well to support this, 0:29 remembering that we need to add the inline attribute to the link element. 0:32 Running gulp will move our index.html from source to dist.. 0:36 Opening this file, we see that our CSS is inline in our HTML. 0:40 Next, let's combine the pikaday.css and theme.css into a single file, and 0:48 minify it as well. 0:53 For this, we are going to add gulp-concat and gulp-clean-css. 0:54 Let's add the variable references, 0:59 and then put in our new date-picker-compile Gulp task. 1:01 This should all pretty familiar from our previous lesson. 1:05 To make this work, we just need to add the date-picker-compile task 1:10 to the default task array. 1:14 Running gulp again, and then opening the CSS directory in the dist directory, 1:18 we will see our new minified CSS file. 1:23 Now we need to update our HTML to point to this new minified resource. 1:27 Looking good, but we also need to minify our JavaScript and HTML resources too. 1:34 To do this, we will use some new tools that we haven't yet discussed. 1:40 First is gulp-uglify, then gulp-rename. 1:45 We're gonna use pump, which is basically a dependency 1:48 requirement, and last, gulp-htmlmin. 1:53 Now we need to add a new task, compress-js. 2:00 And then we can add this to the default task array below. 2:04 Running gulp now will minify our JS files, and 2:10 we will see the new js directory appear in our dist directory. 2:13 Now we need to update our HTML file references by 2:19 adding the new min suffix to our files. 2:22 Run gulp again, and then open the processed index.html file to make 2:32 sure that we are processing correctly. 2:36 Let's get a local server running, so 2:40 that we can see how we are doing in the browser. 2:41 I'm using a local server called live-server, look for 2:44 a link in the teacher's notes. 2:46 We have a functional app, great. 2:55 Let's open the Inspector Network tab. 2:58 Oops, we need to be larger than the mobile spec, and 3:00 refreshing we see that we are 49.1K for desktop. 3:03 And then going down to mobile, we are at 34.2K. 3:06 I'm feeling pretty good about this. 3:12 Next, to really smash things down, let's gzip our files locally. 3:14 Again, we can move this process to Gulp by using gulp-gzip to see an example output. 3:18 But first, we forgot to add in the function that will minify our HTML. 3:24 We can easily add this to the inline source task. 3:28 Running gulp and opening our processed index.html file, 3:31 we see that we are minified, looks nice. 3:34 Going back to our gulpfile, let's get gzip in here. 3:38 Let's add the gzip variable that points to the Gulp gulp-gzip npm module. 3:41 In our CSS task, we need to pipe in the gzip function. 3:49 Then, in the compress-js task, we also need to pipe in this function as well. 3:54 Let's run gulp again, and now we see these newly processed 4:04 assets with .gz prefix in our file directory. 4:08 In our HTML, 4:13 we need to update the references to point to these new resource files. 4:14 To get this to work, I'm going to need a new type of server. 4:28 So let's kill the previous server, and for this, we're going to use http-server. 4:32 Once installed, we can run the command http-server -g. 4:38 Let's grab this URL, and then open in the browser. 4:44 Great, this is all still working. 4:52 Opening the inspector, we see oops, we forgot to run gulp again. 4:55 Great, we have the right resources. 5:11 Back in the browser, refresh, and we have 18K for the desktop. 5:13 And 13K for mobile. 5:20 Our load times are amazing, and 5:22 there is zero latency within the scope of this component. 5:24 Now this is performance. 5:28 So we hit some pretty amazing targets. 5:32 We were able to build a feature that is not dependent on a large library resource, 5:34 and in the end, only adds a few kilobytes of data. 5:39