How to benefit from tree-shaking and code-splitting while loading JSON in Nuxt?-CodePudding

I have a nuxt-app, where I have a lot of posts. I recently refactored the project and I won't generate all posts anymore, as it is just taking too much time to do that.

Instead I have a page where I would fetch the matching post content via url query: www.mypage.com/posts/?post=my-post-slug

Because the content is lying in static json files, for example in:

/static/data/posts/my-post-slug.json
/static/data/posts/my-post-slug_2.json
/static/data/posts/my-post-slug_3.json
/static/data/posts/my-post-slug_n.json

I read the post

CodePudding user response：

Those files are not included "twice". You need them, so you do have them locally in your static folder.

Meanwhile, you should probably put them inside of your src directory if you don't want/need to have them exposed publicly and benefit from code-splitting thanks to Webpack as explained in the post you've linked (which is still valid even if it's a 2017 one!).

Here, since you're making an axios call and using target: 'static', it will bundle your whole thing to work even without JS and it does that ahead of time. So, in order to have all the possibilities, it includes all in the final bundle I think.

If you want to only load what is needed while not shipping a big static directory, you should import them dynamically. You can use a dynamic import: load only the needed JSON by passing the actual postSlug.

PS: style-wise, prefer using async/await (.then is deprecated) and maybe also $axios.$get.

CodePudding user response：

Although I think @kissu s answer is answering my question in the title, it was not the solution for my problem. For the sake of completeness I will post what I found out after long and many hours of debugging. I still don't quite understand why this even happened, but maybe someone could comment on that as well:

In my nuxt-project I am using a utility file getData.js of which I import a function getDataServer into one of my vuex store modules.

// vuex store module: store/data.js
import { getPreviewData } from '~/api/getData'

The code looks like this:

// getData.js

// Get static JSON file (e.g. basic.de.json or posts.de.1.json)
export function getDataServer(fileProps) {
  return require(`~/${fileProps.path}${fileProps.name}.${fileProps.lang}${
    fileProps.page ? `.${fileProps.page}` : ''
  }.json`)
}

Only by importing and not even by executing that function webpack would bundle EVERY .json file it can find in my root folder into my app.js.

That is why I had a dist folder appearing in my bundle, if not deleted. (The point I talk about in my original question, where I have things included twice).

I even created additional folders and .json files to see, and they were all bundled no matter what.

Only after removing the getData.js from my project my bundle became clean.

I understand that with the require command, webpack cannot tree-shake things, so I would have expected that some code-splitting features would not work, but what I did not expect was that this bit of code would automatically get every .json in my folder...

Does anyone know why importing that function would execute it in a way that acts as a wildcard for all .jsons? To me it still does not make any sense.

Thanks and cheers.