Vue Lazy Load Refactor - PullRequest
Новая
       26

Vue Lazy Load Refactor

3 голосов
/ 12 мая 2019

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

   export default c => ({
     component: import(`${c}`),
     loading: loadingComponent,

     timeout: 3000
   })

Я пытаюсь преобразовать это в одну функцию и использовать ее вот так 

import lazyload from './lazyload';
Collection:   lazyload("./Collection.vue")

Но веб-пакет не извлекает компонент, так как онОбычно я знаю, что что-то упустил.

1 Ответ

0 голосов
/ 12 мая 2019

Вам необходимо создать асинхронный компонент factory (что означает function ). Кроме того, модуль импорта не может быть полностью динамическим, для пути к модулю должен быть какой-то префикс, иначе он может буквально соответствовать любому модулю, а веб-пакету необходимо знать, какому подмножеству модулей он может соответствовать во время выполнения, чтобы включить их в сборку.

Полностью динамические операторы, такие как import(foo), , завершатся с ошибкой , поскольку для веб-пакета требуется хотя бы некоторая информация о расположении файла. Это потому, что foo может быть любым путем к любому файлу в вашей системе или проекте. import() должен содержать хотя бы некоторую информацию о том, где находится модуль, поэтому комплектация может быть ограничена определенным каталогом или набором файлов.

Я внес некоторые коррективы в ваш код (не проверено):

lazyload.js 

export default c => () => ({
  component: import(`./components/${c}`),
  loading: loadingComponent,
  timeout: 3000
})

Пример использования 

import lazyload from './lazyload'

export default {
  components: {
    Collection: lazyload('collection.vue')
  }
}

Лучшей реализацией, на мой взгляд, было бы избегать создания динамического импорта. Я предпочитаю, чтобы webpack точно знал, какие модули определенно необходимы во время сборки, а не связывает воедино подмножество модулей внутри каталога.

lazyload.js 

export default componentFn => () => ({
  component: componentFn(),
  loading: loadingComponent,
  timeout: 3000
})

Пример использования 

import lazyload from './lazyload'

export default {
  components: {
    Collection: lazyload(() => import('./collection.vue'))
  }
}

Теперь lazyload не зависит от какого-либо конкретного каталога компонентов и может использоваться с любым компонентом.

...