I've got my dev server up and running again with npm run dev. Now, let's take a look at how Veet handles JSON files. First, we need a JSON file to work with, so I'll create one in the source directory. json.
Then, we'll need to create a little data. So, we've got a key of framework set to view, build tool set to Veet, of course, and then finally, developer mood. view I'll import it and then console log the results now when we view this in the browser and open up the console you can see that we've got a real javascript object logged instead of a json string pretty sweet so Under the hood, Vite automatically parses our imported JSON files. But Vite actually goes one step further than that.
We can even import a root field from the JSON, as if it were a named export. For instance, let's say that we only wanted to grab developer mood. Well, we could do that. If we take a look in the console now, and just so it's clear, I'll give the page a refresh here.
Yeah. Only happy happy happy is logged. But what about once we've bundled the app for production? What happens to the build tool and the framework since we aren't using them?
Well, Vite can actually tree shake that data. Let's take a look. I'll stop the development server, run the build, and then start up the preview server. Now, when I visit localhost 5000 in the browser, if I open up the network tab, and refresh the page.
And I'll just remove this filter here. You can see that we have an index dot some kind of hash here dot js. This is our bundled JavaScript. Let's open that up and examine it.
If I look for the string of happy in here, sure enough, I find happy, happy, happy. But if I search for the string of course, which was part of the build tool value, yeah. it's nowhere to be found. Vite knows it's not used, and thus it doesn't burden the end user with having to download it.
Perfect. I've got my dev server up and running again with npm run dev. Now, let's take a look at how Veet handles JSON files. First, we need a JSON file to work with, so I'll create one in the source directory.
json. Then, we'll need to create a little data. So, we've got a key of framework set to view, build tool set to Veet, of course, and then finally, developer mood. view I'll import it and then console log the results now when we view this in the browser and open up the console you can see that we've got a real javascript object logged instead of a json string pretty sweet so Under the hood, Vite automatically parses our imported JSON files.
But Vite actually goes one step further than that. We can even import a root field from the JSON, as if it were a named export. For instance, let's say that we only wanted to grab developer mood. Well, we could do that.
If we take a look in the console now, and just so it's clear, I'll give the page a refresh here. Yeah. Only happy happy happy is logged. But what about once we've bundled the app for production?
What happens to the build tool and the framework since we aren't using them? Well, Vite can actually tree shake that data. Let's take a look. I'll stop the development server, run the build, and then start up the preview server.
Now, when I visit localhost 5000 in the browser, if I open up the network tab, and refresh the page. And I'll just remove this filter here. You can see that we have an index dot some kind of hash here dot js. This is our bundled JavaScript.
Let's open that up and examine it. If I look for the string of happy in here, sure enough, I find happy, happy, happy. But if I search for the string of course, which was part of the build tool value, yeah. it's nowhere to be found.
Vite knows it's not used, and thus it doesn't burden the end user with having to download it. Perfect.