Bundle Analyzer Preset

[00:00:00]
>> Sean Larkin: One that I think is like really valuable that is kinda ad-hoc that you may only add sometimes. Like I know some of our team at Microsoft, we use this plugin, like we deploy it with production as well, because I can explain why as we talk about the plugin.

[00:00:15]
So, one of the most really valuable things is that webpack by default, when it builds, it emits this stats object. And the stats object either gets converted to a string or to JSON, which is printed in the terminal. Which is kind of like this information you see anytime a build happens.

[00:00:35]
Or you can plug into it, and consume it, and do some pretty interesting stuff with it. And so, analyzing why did this certain dependency get pulled into my application? Why is this file so large? And so, we're gonna add a plugin now called the Webpack Plugin Analyzer. Mpm install webpack bundle analyzer.

[00:01:06]
Hands down one of my favorite, probably one of the most valuable visualization tools for the graph itself. So go ahead and install that.
>> Sean Larkin: Awesome. So, why do we add a new preset? Well, so if you have a couple of options, I think one you could add a script if you wanted to.

[00:01:48]
But it's optional. Like the cool thing about presets is you could just write whatever command you want and compose it on on the fly. I think I'm just gonna do it just for the sake of having it here, and easy to call. So, I'm just gonna call it analyze.

[00:02:04]
>> Sean Larkin: And I promise Kayla, I won't forget it this time, so MPM one prod dash, dash space, dash, dash. ENV preset. So I'm so spoiled with yarn because they don't make you do the extra dash, dash. That's my fault, analyze. So we can add a new script called prod:analyze that just composes and adds a new preset called analyze.

[00:02:32]
And,
>> Sean Larkin: Now for this to work, we'd actually have to have the preset available, right? We need t create it. So, we're gonna create a new configure. So webpack.analyze. That's the only rule with this convention is that, whatever your preset name is needs to match webpack.name.js. That's kind of the convention they created.

[00:03:04]
>> Sean Larkin: And essentially we wanna add this bundle analyzer this plugin and only apply it when we use this preset, right?
>> Sean Larkin: Here we go.
>> Sean Larkin: So we know we have a config right here. So we can add a plugins array, right? And we'll just require that module now.

[00:03:29]
So WebpackBundleAnalyzer. Now, we just pulled this repo into our organization. We have a separate org that we own, called webpack contrib. And it houses all of our are owned or managed loaders and plugins. And this one we just added in but there's a slight convention when you're using Webpack Bundle Analyzer that's not really the same as most plugins.

[00:04:01]
And it's that, you have to access a named export called Bundle Analyzer Plugin to use this. I think it's so weird but, we should fix it now that we own it. But like we do anything else, we just call new WebpackBundleAnalyzer. And why do we put this to practice now?

[00:04:21]
So, our script was called prod analyze. So, yarn prod-analyze.
>> Sean Larkin: Whoa, whats happening? [LAUGH] This is the exciting part. So this is what webpack bundle analyzer does. So out of the box, it creates a separate dev server that you could open up. And it gives you a tree map visualization of what is in your bundle, right?

[00:04:56]
And so, this is incredibly, incredibly valued for identifying like, why do I have duplication across these bundles? Or why is this file not getting separated out? Or why is this not being tree shaken? And so that is super, super valuable for identifying that kind of stuff. And even if you had a bigger application, I think what I wanna do in here tomorrow, we'll use this preset and we'll use it for identifying performance issues.

[00:05:30]
Like, I want to use load ash, but for some reason I'm getting three gigs, or three meg in my bundle. And I don't know why. I'm only using one function. Why is webpack broken? Or whatever. And so this is super viable to help identify like, why did this happen?