当数据相同时，所有 nuxt 静态生成路由的单个 payload.js

Question

我有一个 NuxtJS 站点，只有一个页面 /pages/matrix/index.vue，但有很多指向该页面的动态路由，每个路由使用相同的数据集。在为 Netlify 上的部署生成静态构建时，dist 文件夹当前达到 ~1.2 GB，包括

• dist/matrix 中的 3125 个 .html 文件（占用约 39% 的空间）
• payload.js 中的 3125 个文件夹用于路由的子文件夹中的 dist/_nuxt/static/[random]/matrix/ 文件（占用约 61% 的空间）

这 61% 是 220kB payload.js 的 3125 个副本，其中完全相同的一组data: [{}]，而只有路线改变：

__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 中提取所有数据，并通过 payload option 将其提供给我的页面组件。首先，我使用File System Routing 并像这样导入pages/matrix/index.vue：

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

感觉不对但有效。我将这种方法归咎于这些有效负载文件的“重复”（坦率地说，没有完全理解静态生成的机制）。我现在用这个nuxt.config.js 设置切换到extendRoutes：

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。

Answer 1

我能想到的几件事：

• 使用 SSR 可以解决其中的一些问题（您告诉过您希望继续使用 Netlify）
• 使用一些aliased routes 可能是个好主意，特别是如果您在两个不同命名的端点处拥有完全相同的数据
• this video 还提供了一些关于 ISG 或其他方式的线索，以便对大页面数量有更大的灵活性
• Nuxt3 能够在Cloudflare workers 上运行，这不是 SSR，也不是完全 ISG，而是一种中间立场，一种不同的方法，但它可以在快速渲染页面时不那么昂贵