Как загрузить компонент после First Contentful Paint или первых элементов в Vue.js или Nuxt.js? - PullRequest
Новая
       21

Как загрузить компонент после First Contentful Paint или первых элементов в Vue.js или Nuxt.js?

2 голосов
/ 05 апреля 2019

Моя цель - лучшее решение Первая содержательная краска с Vue.js или Nuxt.js

Я думаю, что лучшим решением является загрузка компонента с помощью импорта после того, как загружены первые элементы.

Я не знаю, является ли это лучшим решением, я хотел бы услышать ваше мнение.

Какой лучший способ кодирования?

Попытка:

Файл загружается с app.js, как загружается только время , когда я установил на true?

devtools

<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')
}

1 Ответ

1 голос
/ 05 апреля 2019

Вы можете определить, когда динамически загружаемый компонент будет эффективно загружен, используя импорт, как вы сказали, в сочетании с 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.

...