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

Question

我的目标是使用Vue.js或Nuxt.js最好地解决First Contentful Paint

我认为最好的解决方案是在加载第一个元素后加载带导入的组件。

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

什么是最好的代码方式？

试：

该文件加载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

您可以使用像您所说的导入有效地加载动态加载的组件，并与组件上的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。