Nuxt.js: nuxt generate: WARNING in asset size limit

[FabianEllenberger]

Hey there,

I have around 10 json files filled with posts. I only load one of those json files in the application at the beginning (commited into the store). The others are there for pagination (clicking on next page loads next json file filled with posts).

Now I'm trying to build static html files with nuxt generate and i get this following warning:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (300 kB).
This can impact web performance.
Assets:
  app.491c5707d886bb0422e7.js (828 kB)

I see that all 10 json files are being loaded inside this generated app.js file, which makes it huge, but the data from these posts is also being stored inside each of the created static html files.

I wonder why this is happening, am I missing something?
Maybe i don't get it right, but I don't know why the data from the store is in each static html file, but also in the app.js which each static file is loading.

Many thanks in advance!

_{This question is available on Nuxt.js community (#c2298)}

[nusendra]

this is mine

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (300 kB).
This can impact web performance.
Assets:
  img/fontawesome-webfont.912ec66.svg (444 kB)
  vendor.1358411bc74c39651690.js (811 kB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (1 MB). This can impact web performance.
Entrypoints:
  app (1.07 MB)
      manifest.4c4b4e4a27c062877818.js
      vendor.1358411bc74c39651690.js
      app.c6564c815416f16d84d4.js

how to solve this?

[limichange]

I think you can async load data.

import('./data.json').then(data => {
  // do something
})

[Jones-S]

@husayt Well this was not really resolved though... I would love to see a solution for this.

[NicoPennec]

@Jones-S
have you try to run your build in analyze mode ?
see https://nuxtjs.org/api/configuration-build#analyze

have you declare your shared vendors in nuxt.config.json ?
see https://nuxtjs.org/api/configuration-build#vendor

---

if you really can't split your code in smaller chunks... your last option is to increase the max chunk size limit.

// nuxt.config.json

  build: {
    maxChunkSize: 300000
  },

see example: https://github.com/nuxt/nuxt.js/blob/dev/examples/vue-chartjs/nuxt.config.js#L11

[Jones-S]

Thanks @NicoPennec for your answer.

I did indeed do that. I did not know that nuxt was capable of doing that out of the box (nice to know :D), but I included the webpack bundle analyzer manually.

You can see the posts (which are split into smaller json-packages (we always take 10 posts)) account for a big part of the final size of our app.js.

Making the chunk size bigger is really the very last option, I would like to take.
We would like to load only the data of the first 10 posts into the app.js and load the others only when clicking on the pagination links. unfortunately nuxt generate does include them all somehow...

Oh and about the shared vendors. I remember reading that solution, when I originally posted the question here. I think we may have some options there, I need to check. But as you can see the biggest part ist consisting of our posts.json. So we need to solve that anyhow.

[FabianEllenberger]

@limichange

I think I already do that like this:

export function getData (type, lang) {
  return axios
    .get(`/data/${type}.${lang}.json`, {
      transformResponse: [].concat(
        axios.defaults.transformResponse,
        normalizeWordpress,
        flattenACF
        // transformDataHoweverYouWant
      )
    })
    .then(res => res.data)
}

But that didn't change anything on the app.js size after nuxt generate.

[NicoPennec]

You should not put your json files in the /static folder.

create an /posts folder on root folder of your nuxt project, with your json files inside.
then expose this file as an API
or
load data from your store / page
import post from '@/posts/your-file.json'

[qm3ster]

@FabianEllenberger in case of generate, you are hitting this API on the serverside, and loading the JSON into store/data, then serializing the store/data and sending it to the client.
It's not the JSONs that are being shipped, it's the data inside the JSONs, I would assume.
Are you using 'spa' mode?

[FabianEllenberger]

@qm3ster probably the JSONs are being shipped because they live inside the static folder like mentioed above by @NicoPennec. I'm not using the spa mode, it's just weird that every generated html includes all data of every single post, i think that's not how id should be. I'll try it with the spa mode and move the JSONs outside the static folder, thanks and i'll comment my progress here!

[qm3ster]

@FabianEllenberger That may not be quite as bad as it looks, because the clientside navigation never fetches another html, just new js for other routes.

If the JSONs, eg for a mock API, live in static, then yeah, they will get shipped in the dist folder of course.

The data inside HTML is indicative of an architectural mistake though - it means that all posts are loaded to display any page (even in non-ssr mode). Properly deferring and limiting preloading other posts' data would prevent this.

This does raise an interesting question, since ideally one would like to not even load the current post's data in duplicate, but I guess that's the price of SSR + hydration.

[FabianEllenberger]

@qm3ster @limichange and @NicoPennec thank you guys! I had an architectural mistake and tried to load the JSONS differnetly or from different positions in the repo. After your tips i was able to fix it with the following:

I made another folder inside the static folder called posts. Now I'm fetching each post separately through ´axios.get()´ depending on the route (watch) which works just fine now. The problem was that I had another JSON file in the same folder as the posts, which was being fetched on initial load, so it included the complete folder with all posts. Now that the posts are in a separate folder it works like expected :-)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.