仅在需要时如何在 Nuxt js 中加载资源

【问题标题】：How to load resources in Nuxt js only when required仅在需要时如何在 Nuxt js 中加载资源
【发布时间】：2021-07-08 06:10:59
【问题描述】：

在 Chrome 控制台中，它会显示一条警告消息，提示 资源正在预加载，但由于在 nuxt.js 中，所有资源默认设置为预加载

如何仅在需要时才加载资源？

【问题讨论】：

到目前为止你看到了什么？另外，您可以将错误发布为文本而不是图像吗？
@kissu 我只是使用了惰性导入，它对指纹来说效果很好。所以现在这个模块只会按需加载，不会在 DOM 加载期间预加载。但是对于 commons/app 这是由 nuxt js 框架创建的 js 包，如果不需要，如何不预加载这些包，我们如何仅在需要时才加载这些包？

【解决方案1】：

您可以使用this configuration 禁用prefetch 和preload

export default {
  render: {
    resourceHints: false
  }
}

你也可以it per link

<nuxt-link to="/about" :prefetch="false">About page not prefetched</nuxt-link>

这也是一个有效的配置

nuxt.config.js

export default {
  router: {
    prefetchLinks: false
  }
}

prefetch 和 preload 不是完全一样的东西，但我目前还没有深入研究它。

【讨论】：