您需要创建一个异步组件工厂(即函数)。此外,导入模块不能完全动态化,必须在模块路径中添加一些前缀,否则它可能与任何模块匹配,而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
不依赖于任何特定的组件目录,可以与任何组件一起使用。