Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

151
Views
Un solo payload.js para todas las rutas generadas estáticas nuxt cuando los datos son los mismos

Tengo un sitio NuxtJS con solo una página /pages/matrix/index.vue pero muchas rutas dinámicas que apuntan a esta página, cada ruta usa el mismo conjunto de datos. Al generar una compilación estática para la implementación en Netlify, la carpeta dist alcanza actualmente ~1.2 GB, que consta de

  • 3125 archivos .html en dist/matrix (ocupando ~39% del espacio)
  • 3125 carpetas para archivos payload.js en dist/_nuxt/static/[random]/matrix/ en subcarpetas para rutas (ocupando ~61% del espacio)

Ese 61% son 3125 copias de un payload.js de payload.js con exactamente el mismo conjunto de data: [{}] , mientras que solo cambia la ruta:

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

Me pregunto si hay una manera de reducir esta redundancia extrayendo de alguna manera la parte de datos. Reducir ~665 MB a solo 220 kB suena atractivo.

Algunos antecedentes más:

Las rutas son /matrix , /matrix/place1 o /matrix/place8/time1,time7,time18 . Al generar, extraigo todos los datos de un CMS sin encabezado y los paso al componente de mi página a través de la opción de carga útil . Primero, utilicé el enrutamiento del sistema de archivos e importé las pages/matrix/index.vue de esta manera:

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

que se sintió mal pero funcionó. Culpé a este enfoque de la "duplicación" de esos archivos de carga útil (francamente, sin comprender completamente la mecánica de la generación estática). Ahora cambié a extendRoutes con esta configuración nuxt.config.js :

 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') } ) } }

La cantidad de archivos de carga útil repartidos en las subcarpetas de ruta sigue siendo la misma.
¿Algún consejo sobre esto? Usando Nuxt v2.15.7.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Pocas cosas en las que puedo pensar:

  • usar SSR resolvería algunos de esos problemas (dijiste que deseas permanecer en Netlify aunque)
  • usar algunas rutas con alias puede ser una buena idea, especialmente si tiene exactamente los mismos datos en 2 puntos finales con nombres diferentes
  • este video también brinda algunas pistas sobre ISG u otras formas de tener más flexibilidad hacia grandes cantidades de páginas
  • Nuxt3 puede ejecutarse en los trabajadores de Cloudflare , esto no es SSR ni exactamente ISG, sino un término medio, un enfoque diferente, pero podría generar páginas para que no sean tan costosas y rápidas.
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!