I am facing a challenge with my NuxtJS site where I have only one page /pages/matrix/index.vue but numerous dynamic routes pointing to this page, all utilizing the same data set. During static build generation for deployment on Netlify, the size of the dist folder has ballooned to approximately 1.2 GB, comprising:
- 3125
.htmlfiles indist/matrix(taking up around 39% of the space) - 3125 folders containing
payload.jsfiles in
, each within subfolders for specific routes (occupying approximately 61% of the space)dist/_nuxt/static/[random]/matrix/
This colossal chunk of 61% consists of 3125 duplicates of a 220kB payload.js file that hold identical data: [{}], with only the route differing:
__NUXT_JSONP__("/matrix/place2/time3,time14,time29", (function(a, b, ...) {
return {
data: [{ /* data does not change */ }],
fetch: {},
mutations: void 0
}
}("nor", "does", "this")));
I am exploring ways to minimize this redundancy by potentially extracting the common data section. The possibility of reducing ~665 MB down to just 220kB is quite enticing.
Additional Context:
The routes vary from /matrix, /matrix/place1 to
/matrix/place8/time1,time7,time18pages/matrix/index.vue as follows:
// pages/matrix/_places/index.vue
<script>
import Index from '../index'
export default Index
</script>
This approach seemed flawed yet functional. I attributed the excessive payload files to this method (albeit without fully grasping the intricacies of static generation). Subsequently, I transitioned to extendRoutes leveraging the following setting in my 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')
}
)
}
}
Unfortunately, the number of payload files scattered across route-specific directories remains unchanged.
Any suggestions or guidance on this matter? Operating on Nuxt v2.15.7.