当数据相同时
我有一个 NuxtJS 站点,只有一个页面 /pages/matrix/index.vue
但有很多动态路由指向该页面,每个路由都使用相同的数据集。生成用于在 Netlify 上部署的静态构建时,dist
文件夹当前达到约 1.2 GB,由
dist/matrix
中的 3125 个.html
文件 组成(占用约 39% 的空间)- 子文件夹中的
dist/_nuxt/static/[random]/matrix/
中有 3125 个用于payload.js
文件的文件夹用于路线(占据约 61% 的空间)
这 61% 是 220kB payload.js
的 3125 个副本,其中包含完全相同的数据集:[{ }]
,而只有路线发生变化:
__NUXT_JSONP__("/matrix/place2/time3,time14,time29", (function(a, b, ...) {
return {
data: [{ /* data does not change */ }],
fetch: {},
mutations: void 0
}
}("nor", "does", "this")));
我想知道是否有办法通过以某种方式提取数据部分来减少这种冗余?将约 665 MB 减少到仅 220kB 听起来很诱人。
更多背景信息:
路由为 /matrix
、/matrix/place1
或 /matrix/place8/time1,time7,time18
。生成时,我从无头 CMS 中提取所有数据,并通过 有效负载选项。首先,我使用文件系统路由并导入pages/matrix /index.vue
像这样:
// pages/matrix/_places/index.vue
<script>
import Index from '../index'
export default Index
</script>
感觉不对但有效。我将这种方法归咎于这些有效负载文件的“重复”(坦率地说,没有完全理解静态生成的机制)。我现在使用此 nuxt.config 切换到 extendRoutes .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')
}
)
}
}
分布在路由子文件夹中的负载文件数量保持不变。
对此有什么建议吗?使用 Nuxt v2.15.7。
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 indist/matrix
(occupying ~39% of the space) - 3125 folders for
payload.js
files indist/_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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

我能想到的几件事:
Few things I can think about: