Transcript from the "JSON Named Exports" Lesson
[00:00:22] You would always just get it. The problem, and it's not actually a problem of CommonJS read large, is there ain't no tree shaking in common JS. You were getting the whole JSON file whether you liked it or not. You can halt everything in CommonJS, whether you like it or not.
[00:00:39] VITE understands that it is likely that you might wanna have some data in a JSON file, right? Other than you could just export default and object, too. But you might choose to pull in just a field. And so one of the things that VITE gives you is the ability, and I have some JSON files in here just for fancies.
[00:01:06] They're totally randomized D&D characters. I don't play D&D, so if anyone knows there's anything wrong here. I'm sorry, email, Dustin, and we'll fix it. And it'll be great. Let's say this is a giant JSON file, right? And let's say I only wanted the name, right? Well, pulling in the rest of the JSON file might add a lot to the bundle.
[00:01:33] And I don't want that. And so what I can do is, let's just do an index so I can see it with the build, I like running the build. This is my new, wasn't the original plan, but I'm into it. If we did import, let's do gandorf. From ./characters/gandorf.
[00:02:03] And, I have some ways to render the DOM, but I both just wanna show you in the build tools. Let's go ahead and let's see what that looks like in here. You can see the entire thing is loaded in there. If I go into the sources and go to characters and slide in this entire file.
[00:02:25] But you'll notice something really cool is look what it did as it pulled it in. export default is the entire file, right? But it also went through the JSON file and it made exports for every single variable on it, right? And so then what I can do is actually I could just do name.
[00:02:52] And it's only gonna pull in just the name, which means when we go to build is gonna tree shake out all those other properties cuz they're not used, right? And so now instead of using the entire JSON file, I'm only gonna get that one name property. I don't know if it'll show me in the sources but we're about to find out if not, I'll show you in the build.
[00:04:01] It seems pretty big, but I wonder if I might have that image in there or somewhere. Hopefully, I don't embarrass myself, we'll find out. I can't find it faster, but it will for the most part try to pull out just the part that I need. Unfortunately, the minified code is borderline impossible to read.
[00:04:35] But, it will tree shake out all the parts that I don't need, cuz as you can see, it was turning it into a regular ES module. And ES modules have tree shaking in them when we're not trying to read minified code where they've turned that variable into a single letter.
[00:04:49] But we will actually be able to shake out all the things you get a whole bunch of powerful features. That again, yes, I want us to get that a little bit of a bit-specific thing. But there are a few patterns where again, I didn't tweak, okay, go shake this stuff out.