如何在 Vue.js 或 Nuxt.js 中的 First Contentful Paint 或第一个元素之后加载组件？

Question

我的目标是使用 Vue.js 或 Nuxt.js的First Contentful Paint 的最佳解决方案

我认为最好的解决方案是在加载第一个元素后使用 import 加载组件。

我不知道是否是最好的解决方案，我想听听您的意见。

什么是最好的编码方式？

试：

文件是加载的app.js，怎么只加载一次我设置的true？

<template>
  <h1>Hello World</h1>

  <!-- First content here -->

  <foo v-if="documentLoaded" />
</template>

mounted() {
  document.onreadystatechange = () => {
    if (document.readyState == "complete") {
      console.log('Page completed with image and files!')

      setTimeout(() => {
        this.documentLoaded = true
      }, 2000);

    }
  }
},
components: {
  Foo: () => import(/* webpackChunkName: "component-foo" */ '~/components/foo')
}

Answer 1

您可以像您所说的那样使用 import 结合组件上的 v-if 来定义何时有效加载动态加载的组件。

<mycomp v-if="readyStateComplete"/>

//readyStateComplete is a boolean from data.

将布尔值设置为 true 将触发组件的加载、初始化和显示。

mounted() {
  document.onreadystatechange = () => {
    if (document.readyState == "complete") {
      console.log('Page completed with image and files!')

      // HOW LOAD COMPONENTS HERE?
      this.readyStateComplete = true

    }
  }
},

如果您希望组件与图像同时加载，但仅在图像之后显示，请使用 v-show 而不是 v-if。