当数据相同时

发布于 01-19 11:57 字数 2224 浏览 1 评论 0原文

我有一个 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 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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

内心激荡2025-01-26 11:57:43

我能想到的几件事:

  • 来解决其中一些问题(你告诉过你希望留在 Netlify 上)
  • 使用 SSR 可以使用一些 别名 路线可能是个好主意,特别是如果您在两个不同名称的端点上拥有完全相同的数据
  • 此视频还提供了一些有关 ISG 的线索或其他方式,以便对大页面量具有更大的灵活性
  • Nuxt3 能够在 Cloudflare 工作人员,这不是 SSR,也不完全是 ISG,而是一种中间立场,一种不同的方法,但它可以以不那么昂贵的方式渲染页面,同时速度很快

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
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文