2

我有一个 nuxt-app，里面有很多帖子。我最近重构了这个项目，我不会再generate发布所有帖子了，因为这样做需要花费太多时间。

相反，我有一个页面，我可以通过 url 查询获取匹配的帖子内容： www.mypage.com/posts/?post=my-post-slug

因为内容位于静态 json 文件中，例如：

/static/data/posts/my-post-slug.json
/static/data/posts/my-post-slug_2.json
/static/data/posts/my-post-slug_3.json
/static/data/posts/my-post-slug_n.json

我阅读了 有关如何以最佳方式加载 json的帖子https://github.com/nuxt/nuxt.js/issues/123 。

我决定在fetch()钩子中做这样的事情：

// ... simplified code
async fetch() {
  let postSlug = this.$route.query.post
  
  const post = this.$axios
    .get(`/posts/posts.de.${postSlug}.json`)
    .then((data) => {
      return data?.data
    })
    .catch((error) => {
      console.error('error: ', error)
      const code = parseInt(error.response && error.response.status)
      if (code === 404) {
        this.$nuxt.error({ statusCode: 404, message: 'Post not found' })
      }
    })


  this.activePost = post?.items?.[0] || false
}

如前所述，我不会生成实际的帖子，但会在我的 sitemap.xml 中生成所有帖子网址。

在分析模式下运行生成时，我现在有一个 huuuuge 包大小（app.js），我不明白为什么...... - >查看附件图像。（注意：app.js34MB 的大小太可笑了！！！！）

  1. 我不明白为什么我所有的 post json 都出现在 bundle 的 static 和 dist 部分？？？
  2. 我完全不明白他们为什么会出现在那里。我希望它们仅位于静态文件夹中，但不包含在应用程序包中。（你可以看到有类似 include 的文件。例如events.bundle.de.json，我需要那些来获取所有帖子的列表。我也只在我的 fetch 挂钩中这样做。

如果有人能指出为什么包含这些文件（两次），我会非常高兴！

在此处输入图像描述

4

2 回答 2

2

这些文件不包括“两次”。您需要它们，因此您的static文件夹中确实有它们。

src同时，如果您不希望/不需要公开它们并从代码拆分中受益，您可能应该将它们放在您的目录中，这要归功于您链接的帖子中所解释的 Webpack（即使它仍然有效）一个 2017 年的！）。

在这里，由于您正在进行 axios 调用并使用target: 'static'，因此即使没有 JS，它也会捆绑您的整个工作，并且它会提前完成。所以，为了拥有所有的可能性，我认为它包含了所有的最终捆绑包。

如果您只想加载需要的内容而不发送大static目录，则应动态导入它们。您可以使用动态导入：通过传递实际的postSlug.

PS：风格方面，更喜欢使用async/await(.then已弃用) ，也许还有$axios.$get.

于 2021-12-21T10:55:57.017 回答
2

尽管我认为@kissu 的答案是在标题中回答了我的问题，但这并不是我问题的解决方案。为了完整起见，我将发布经过长时间调试后发现的内容。我仍然不太明白为什么会发生这种情况，但也许有人也可以对此发表评论：

在我的 nuxt 项目中，我使用了一个实用程序文件getData.js，我将一个函数getDataServer导入到我的一个 vuex 存储模块中。

// vuex store module: store/data.js
import { getPreviewData } from '~/api/getData'

代码如下所示：

// getData.js

// Get static JSON file (e.g. basic.de.json or posts.de.1.json)
export function getDataServer(fileProps) {
  return require(`~/${fileProps.path}${fileProps.name}.${fileProps.lang}${
    fileProps.page ? `.${fileProps.page}` : ''
  }.json`)
}

只有通过导入，甚至不通过执行该功能，webpack 才会将.json它可以在我的根文件夹中找到的每个文件捆绑到我的 app.js 中。

这就是为什么我的包中出现了一个 dist 文件夹，如果没有删除的话。（我在最初的问题中谈到的一点，我在其中包含了两次内容）。

我什至创建了额外的文件夹和 .json 文件来查看，无论如何它们都捆绑在一起。

只有getData.js从我的项目中删除后，我的包才变得干净。

我知道使用该require命令，webpack 不能 tree-shake 东西，所以我本以为某些代码拆分功能将不起作用，但我没想到的是这段代码会自动获取.json我文件夹中的每一个.. .

有谁知道为什么导入该函数会以充当所有 .json 通配符的方式执行它？对我来说它仍然没有任何意义。

谢谢和欢呼。

于 2021-12-22T09:45:14.443 回答