 Hey there, PolyGuessers. Rob here. Today on the show, I want to talk about performance. As web developers, one of the things that we often do when we're about to deploy a site into production is we take all of our scripts, all of our styles, and we can catenate them together to cut down on costly HTTP requests. Now, if you're working with something like Polymer and Web Components, it's important to remember to also concatenate your definitions for Web Components as well, because those count as HTTP requests too. So today, what I want to show you is a tool that we've created called Volcanize, which you can use to cut down on those HTTP requests and make sure your Polymer apps are as performant as possible. Now, before I get into any of that, I first want to show you kind of the impact that Volcanize can have on your app. So what I've got here is, over in the terminal, I'm just going to run Polymer Starter Kit. I'm going to use its development server that comes with it. So I'm going to run gulp serve just to boot this up. And I haven't done anything to this project yet. It's just a fresh checkout of Polymer Starter Kit. So see, we see that sort of starting page. And when we open the DevTools, if we go to the network panel and we refresh to load up our app, we can go down in the corner there and see that this application is currently making 65 HTTP requests for that one simple page, which is quite a lot. Now, if you look kind of up at the top of this, you'll notice that it lists these files here, like ironfitbehavior.html and polymermicro.html. Those are all of our Web Component definitions being fetched individually. So let's see if we can cut down on this using a tool like Vulcanize. So this is the same example again. This time, I'm going to run gulp serve dist. This is our distribution server. It's going to run Vulcanize for us. It's going to take all those imports and concatenate them together. And now, when I go to the network panel and check things out, you'll notice that we've gone from 65 requests down to just 14 requests for this application. So that is a huge, huge difference. You can imagine if you were building a massive app with hundreds of elements inside of it, you would definitely want that sort of performance boost that Vulcanize would give you. So how do we do this? Well, there's two ways to run Vulcanize. You can either run it from the command line, or you can integrate it in your build process using a tool like gulp. So I'll start off by showing you the command line version, and then we'll switch over to using gulp. To start off with the command line, you just want to run npm install dash g to do a global install of Vulcanize. So we'll pull down Vulcanize. And this is going to make the Vulcanize binary available to us from the command line. So we can just type Vulcanize whenever we want, and it'll process a file for us. OK, so we've got Vulcanize installed now. What I've done is I've set up a very simple project here. You can see I've got an index file with a single HTML import in there that's pulling in elements.html. Inside that file, I've got a few more HTML imports, where I'm loading in these two elements, exfoo and exbar. And looking at their definitions, they're just really vanilla kind of boilerplate polymer elements. But they're going to help us demonstrate how we're going to bundle all of this stuff together. So what I want to do is take that elements.html file and just sort of crunch it down as small as I possibly can. Over in my terminal, I'm going to run the Vulcanize command. And I'm going to point it at app slash element slash elements.html. And when I run this just from the command line, it's actually going to walk that tree of imports, take all those files, concatenate them together, and just return the output to standard out. So that's kind of useful if we were going to like pipe this to some other command. But what I'd really like to do is write this out to a file in my disk directory. So to do that, I'll run Vulcanize again. First, I'll make a directory actually to hold my distribution. Then I'll run Vulcanize. And I'm going to Vulcanize that elements.html file. And then I'll just use the little arrow symbol to write the output to a file in my disk directory, which I'll just call elements.html as well. Now, if you don't want to use the arrow key or whatever, if you want to use the options like command line flags and things like that, you could also just use the dash o option. Basically does the exact same thing. And so we'll write out to this file elements.vulcanize.html. Now, there's a lot more options that we can pass beyond just output. We could also tell Vulcanize that we wanted to inline any external scripts that our elements depend on or pull in any of their external style sheets or strip out all of their comments. All of these are available as command line flags. You can really customize the bundle that you're building with Vulcanize. And honestly, I would recommend using all three of these flags just because it's going to crunch that file down as small as it possibly can be. So now that I've run that, I can go back to my editor and I can look in the disk directory. If we check out that elements.html file, you'll see that now it's a bunch of stuff chucked inside of here. We've got Polymer all up at the top, all the JavaScript for it, and any HTML that it depends upon. If we keep scrolling, we go all the way down to the bottom. We'll actually see xfoo and xbar, those elements from our little sample project. They're crunched into this as well. All their HTML, all their JavaScript is here. So this application, which maybe it was making before four or five HTTP requests to boot up, should now only be making one HTTP request for this single file. This is a really great start, but it's kind of a bummer to have to run this command from the command line every single time you want to build and mess around with your application. It'd be nicer to integrate it as part of a build step using a tool like Gulp. So to do that, I'm going to go back to my command line. I'm just going to run npm install. I'm going to save it to my dev dependencies. And I'm going to pull down Gulp and Gulp Volcanize. And since this is npm, now we wait. Now we've got those dependencies installed. We can go set up a Gulp file. So I'm going to go ahead and require Gulp. I'm going to require Gulp Volcanize. And I'm just going to write out a really simple Gulp task for our Volcanize process. We'll tell it to pull in elements HTML. We'll pipe that to Volcanize. And then we'll pipe that to our disk directory. I'm also going to write a default task, which is just going to run Volcanize for us. And this is starting to shape up to be a pretty nice boiler plate for a little Polymer project that we could launch into production. If I go to my terminal, I run Gulp. It's going to go out. It's going to do that build process for me, which is pretty cool. There's a little bit more that I can do here. I showed you those command line flags before for inlining scripts and stripping comments. We can add that to our Volcanize task as well. We just pass it an options object with those same options, but this time they're candle cased. And I'm also going to add a copy task here so I can copy over my index file and my web components polyfills to my disk directory. And now when I run Gulp, I've basically set up everything I need for a production Polymer site. I can run a little server from that disk directory. You can see here are my elements showing up. I've also got my web components polyfills loaded. So if you want, you can even use that Gulp file as a starting point the next time you want to mess around with Polymer. The main thing to take away from this though is if you're launching Polymer in production, you should always, always, always make sure that you run Volcanize before you do so. It's going to dramatically improve the performance of your application by cutting down HTTP request. And ultimately, it's just something that everyone should be doing in their Polymer app. Now I want to cover tools like Volcanize and a few of its friends and some future episodes. If you have any questions on this episode, you can leave me some comments down below or maybe consider clicking that like button if you've enjoyed the episode. Also, if you want to ping us on a social network like Twitter or G+, you can hit us up at hashtag AskPolymer. As always, thank you so much for watching and I'll see you next time.