Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

150
Visualizações
A single payload.js for all nuxt static generate'd routes when data is the same

I have a NuxtJS site with only one page /pages/matrix/index.vue but quite a lot of dynamic routes pointing to this page, each route using the same set of data. When generating a static build for deployment on Netlify, the dist folder currently reaches ~1.2 GB, consisting of

  • 3125 .html files in dist/matrix (occupying ~39% of the space)
  • 3125 folders for payload.js files in dist/_nuxt/static/[random]/matrix/ in subfolders for routes (occupying ~61% of the space)

Those 61% are 3125 copies of a 220kB payload.js with exactly the same set of data: [{}], while only the route changes:

__NUXT_JSONP__("/matrix/place2/time3,time14,time29", (function(a, b, ...) {
    return {
        data: [{ /* data does not change */ }],
        fetch: {},
        mutations: void 0
    }
}("nor", "does", "this")));

I wonder if there is a way to reduce this redundancy by somehow extracting the data part? Reducing ~665 MB to just 220kB sounds alluring.

Some more background:

Routes are /matrix, /matrix/place1 or /matrix/place8/time1,time7,time18. When generating, I pull all data from a headless CMS and feed it to my page component via the payload option. First, I used File System Routing and imported the pages/matrix/index.vue like this:

// pages/matrix/_places/index.vue
<script>
  import Index from '../index'
  export default Index
</script>

which felt wrong but worked. I blamed this approach to the "duplication" of those payload files (frankly without completely understanding the mechanics of static generation). I now switched to extendRoutes with this nuxt.config.js setting:

router: {
  extendRoutes (routes, resolve) {
    routes.push(
      {
        name: 'matrix-place-times',
        path: '/matrix/:place/:times',
        component: resolve(__dirname, 'pages/matrix/index.vue')
      },
      {
        name: 'matrix-place',
        path: '/matrix/:place',
        component: resolve(__dirname, 'pages/matrix/index.vue')
      }
    )
  }
}

The amount of payload files spread across route subfolders stays the same.
Any advice on this? Using Nuxt v2.15.7.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Few things I can think about:

  • using SSR would solve some of those issues (you told that you wish to stay on Netlify tho)
  • using some aliased routes may be a good idea, especially if you have the exact same data at 2 differently named endpoints
  • this video also gives some leads regarding ISG or other ways to have more flexibility towards big page amounts
  • Nuxt3 is able to run on Cloudflare workers, this is not SSR nor exactly ISG but a middle ground, a different approach but it could render pages for not so expensive while being quick
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda