 So Matt, what's what's in your bundle? I don't have any bundles. You don't you don't have any JavaScript bundles I don't I don't write JavaScript anymore. There's JavaScript fatigue finally gotten you. Yeah, that's it. I'm just I'm dead now What's what do you do these days? I come and meet you in a coffee shop and get free coffee because any nightful human being like any normal developer I see okay, so if everybody else out there working on JavaScript There's a really cool tool I recently discovered called source map Explorer and get it on npm This is sort of useful for understanding what is in your JavaScript bundle what you're shipping down to your users So how is this different from just normal source maps? What is it? What does it give you? It sort of understands your dependency graph and pen and see tree visualize it for you. Okay, nice pleasant way Okay, so I'm gonna run it against a source map that was generated for one of my vendor bundles And just show you what this looks like. So here we've got a Chrome open. I've got the source map Explorer dependency graph sort of visualized here and this is kind of nice because I can take a look at any One part of my graph so I can see here all these are all the different bits and pieces of react that I'm using I've got react router over here in the corner and I can zoom in and out. It's so nice and pretty But I've also got I can see that you know what percentage of my bundle is being taken up by different libraries Here I can see that in this case firebase is taking up quite a lot of my my bundle But I wanted to show you a pro tip that that I was walking through with David East the other day So and then source map Explorer visualizes this quite nicely So I can actually just require in the pieces of firebase that I'm actually Using rather than a whole massive bundle right there than the whole thing. So a few minor changes I can go and do a new build And if that all works out, I can show you the before and after thanks to some movie magic Now we're gonna go and run it against the new vendor bundle and What we can see now is that a we've got a much smaller bundle on the whole but be we've also changed the look of this graph So earlier we were had a firebase about 304 kilobytes sort of that's unminified on G zip But it contained database authentication storage and app. I really only need app and database So I just switched my code over to using those atomic modules and here you can see that we've actually managed to make our app a tiny bit smaller It's a hundred and thirty eight Kilobytes before we've minified it and Jesus it all you need to use this is just the source map You don't the original source or anything like that. It just works on source maps So normally like for a dev at least I usually have my source maps on my JavaScript files Yeah, it's kind of nice because I guess if you strip stuff out the actual main source By whatever tooling that then gets accounted for in the source map. Yeah, yeah, there's a bunch of different bundle analysis tools are available Webpack bundle analyzers another one that's got colorization in place and it's super sweet specific to webpack I think at the moment, but it's also we're checking out But yeah tools like this are just great for understanding exactly what you're shipping down to your users So it's good to ask yourself. What's in your bundle? No, I see what you did that