Vue 懒加载重构

Question

我正在尝试在我的应用程序中懒加载大量组件，我希望在任何一个组件加载时显示加载动画，出现错误也同样如此；因此有很多重复的工作。

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

     timeout: 3000
   })

我正在尝试将这个函数重构为单个函数，并以此使用它

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

但是webpack没有像通常一样提取组件，我知道我漏掉了什么。

- wkasem2

---

从数据库使用Vue.js AJAX和PHP加载更多数据。 - Jaydeep Gondaliya

Answer 1

您需要创建一个异步组件工厂（即函数）。此外，导入模块不能完全动态化，必须在模块路径中添加一些前缀，否则它可能与任何模块匹配，而webpack需要知道哪些子集的模块可能在运行时匹配以将它们包含在构建中。

完全动态的语句，例如import(foo)，将失败，因为webpack需要至少一些文件位置信息。这是因为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 不依赖于任何特定的组件目录，可以与任何组件一起使用。

- Decade Moon

---

https://pakainfo.com/load-more-data-from-database-using-vue-js-ajax-php/ - Jaydeep Gondaliya