Vue 延迟加载重构答案

【问题标题】：Vue Lazy load refactorVue 延迟加载重构
【发布时间】：2019-05-11 23:59:43
【问题描述】：

我正在尝试在我的应用程序中延迟加载很多组件，我想在其中任何一个正在加载时显示一个加载微调器，对于错误也是如此；所以有很多重复。

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

     timeout: 3000
   })

我正在尝试将其重构为单个函数并像那样使用它

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

但是 webpack 并没有像往常一样提取组件，我知道我遗漏了一些东西。

【问题讨论】：

【解决方案1】：

你需要创建一个异步组件factory（意思是function）。此外，导入模块不能是完全动态的，模块路径需要有一些前缀，否则它可以匹配任何模块，并且 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 不依赖于任何特定的组件目录，可以与任何组件一起使用。

【讨论】：