Question

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

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

     timeout: 3000
   })

我试图将其重构为单个函数，并像这样使用它

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

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

Answer 1

您需要创建一个异步组件 factory （意为功能）。同样，导入模块不能完全动态，模块路径必须有一些前缀，否则它可以从字面上匹配任何模块，并且webpack需要知道它在运行时可能匹配的模块子集，以将其包括在构建中。 >

完全动态的语句，例如File has correctly been initialized to red dot: <img id="image" style="width: 10px; height: 10px;" />，将失败，因为Webpack至少需要一些文件位置信息。这是因为foo可能是系统或项目中任何文件的任何路径。 import(foo)必须至少包含有关模块位置的某些信息，因此捆绑可以限制为特定目录或文件集。

我对您的代码进行了一些调整（未调试）：

lazyload.js

import()

用法示例

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

我认为，更好的实现方法是避免创建动态导入。我更喜欢webpack确定在构建时肯定需要哪些模块，而不是将目录中的模块子集捆绑在一起。

lazyload.js

import lazyload from './lazyload'

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

用法示例

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

现在import lazyload from './lazyload' export default { components: { Collection: lazyload(() => import('./collection.vue')) } }不依赖于任何特定的组件目录，并且可以与任何组件一起使用。

Vue延迟负载重构

1 个答案: