Analyzing Bundle Sizes

[00:00:00]
>> Steve Kinney: Is Webpack comes with this webpack-bundle-analyzer, which does effectively what it says on the tin, right? It analyzes your bundles. You're like, great, what does that mean? Getting there. So I'm gonna go ahead, and I'm just going to flip this. It's on, very cool.
>> Steve Kinney: So, what we'll do is we're gonna build for production.

[00:00:25]
Let's do a npm run build, and what this will do is it'll build my file. And it'll fire up the bundle analyzer, and we can see the contents of my bundle.
>> Steve Kinney: Give it a second.
>> Steve Kinney: This is it. This is my bundle, main.some checksum.bundle.js, and it's really useful for visualizing where all your code is.

[00:00:57]
Like what is taking up most of that bundle? So this is the code I wrote over here, this tiny little sliver in the source directory. I have written, effectively, after it's been gzipped, 2.26 kilobytes. But I am shipping all of this code, and I'm shipping all of lodash.

[00:01:19]
I'm shipping codemirror, which is clearly a large bundle. Makes it very obvious who the culprits are when you get to see it like this. React-dom, I'm probably not gonna get away from that one. And a few other libraries, and the user is getting all of this, right? They're parsing all of it.

[00:01:38]
It's all going through the tubes, right? I don't know if they need all of this, like I can not send them some stuff. Like if they need the code editor, we'll send them the code editor.