JSON Named Exports

[00:00:00]
>> There's other cool things the interface gives us. And one of them is Node has always let us import JSON and treat it like JavaScript, right? You could always in the earliest versions of Node do Require and then a JSON file and you would get a JavaScript object you wouldn't have to do a JSON parse on it.

[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:03:13]
Let's go check it out now. But if we go and we run the build, I kind of wanna make it its own chunk. Hold on, let's do this. Just to really demonstrate like that fact that we're only gonna get the part we need. We'll do import. And then only pull in the name And then we'll do npm run build So we got this little JavaScript file over here.

[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.

[00:05:00]
I basically get, hey, these are the things you want. It's going to under the hood, turn all that stuff into modern JavaScript, which gets us all of the ability to have just the parts that we need.