Compression Plugin

[00:00:00]
>> Sean Larkin: In the same way, we can literally just add a specific plugin. So we have a plugin called I'm just gonna make sure we have the order right on the name, I always mix it up. So it's under web pack contrib also, so web pack contrib flash web compression web pack plugin

[00:00:21]
>> Sean Larkin: Yes, I love it when I get it right. Let's just look at the options first before we,
>> Sean Larkin: Except, let's just go to the main repo. So really, it's pretty simple, it takes any of your assets that you wanna include, and it compresses them. So gzip is the default.

[00:00:43]
If you wanna add Python as a dependency you can use outfly or something different. I even think it now supports brotli. So I think that that's really neat. But to install it's really simple, MPMI, decompress your web pack plug in. So, we can do so.
>> Sean Larkin: I think this is fine to be in both branches.

[00:01:09]
So yarn add compression webpack plugin.
>> Sean Larkin: And in the same way that we just did with analyze, we can require this in. So,
>> Sean Larkin: New Compression.
>> Sean Larkin: All right, so let's run it and see what happens. yarn prod compress.
>> Sean Larkin: Awesome. Let's take it a step further. This is what I think is great.

[00:01:56]
What if we did env.presets here and said Analyze.
>> Sean Larkin: So now, you can get both. You could freely swap in and out whatever you wanted to. If you wanted to be like, if you really take performance seriously. I've seen this method and I wanna create a service around this.

[00:02:24]
But allows you to have an AV testing environment for different types of methodology, different ways of bundling your application, and switching on these different presets in combination. By now you can see all these are super tiny, we're getting really small. And I think even would give us the GZIP if where's that bar, I always miss it on here,

[00:02:50]
>> Sean Larkin: Where is it? Yeah, but it has the GZIP size and everything. Or if we looked in our terminal feedback we can actually see the, like bundle was the only thing that got G-zipped. Because it's up to a certain threshold where it's even efficient to compress. And then it just handles it for you.

[00:03:11]
You can upload that to whatever server. Web Pack Dev Server handles that through Express. Are there any questions so far about these plugins? Now, each of these have individual options. It really just depends on what your environment is. Let's say the Outlook team, so webpack bundle analyzer
>> Sean Larkin: The Outlook web app team at Microsoft, what they do, I think it's really cool.

[00:03:42]
Is that you can take, if you set the analyzer mode property to static, what this does is it generates all the static assets to visualize. And then they actually serve it up on a separate port for every production build that they do. So, at any time they notice we've regressed in performance.

[00:04:05]
For any build they can just go to like colon, whatever port forward slash analyze, and it's there for that build. And so, they just redeploy it every time as a part of their build. I think that's super cool like cuz then you can really it's kind of a pain sometimes if you're trying to, if somebody's like well why is there so much bloat here?

[00:04:32]
If you think about the dev workflow without something like a preset system, it's like okay can you just spin this up locally? And they're like, okay, hold on let me grab my environment production build, also add the bundle analyzer, they might not have by default. So I really like the fact that it's just served up alongside in a separate domain or a separate port URL.

[00:04:54]
You can have it auto open the analyzer, which it's been doing. You could even generate the stats file aside from it, change your log levels, all sorts of stuff. The maintainer here who originally authored this just did an incredible job. And now we're fortunate enough for him to be able to allow us to have it under our organization and he helps contribute to it still.

[00:05:20]
As you can see it's in alpha right now with some new features.