Vue.js 中延迟加载特定组件

Question

我只是让它变得快速：在正常加载组件（例如 emoji-mart-vue 包中的“Picker”组件）时，应使用以下语法：

import {Picker} from "./emoji-mart-vue";

Vue.component("picker", Picker);

而且效果很好。但是当我尝试延迟加载该组件时，我不确定要编写什么代码。请注意，文档中编写的以下语法在这种情况下无法按预期工作：

let Picker = ()=>import("./emoji-mart-vue");

Answer 1

我假设问题是你正在使用

let Picker = ()=>import("./emoji-mart-vue");
Vue.component("picker", Picker);

需要明确的是，您是在解决承诺之前直接定义组件，因此为该组件分配了一个承诺，而不是已解决的组件。

解决方案并不明确，取决于“你想要完成什么”

一种可能的解决方案：

import("./emoji-mart-vue")
  .then(Picker=> {
    Vue.component("picker", Picker);
    // other vue stuff
  });

这将（阻塞）等待组件加载完毕，然后再加载应用程序的其余部分。恕我直言，这违背了代码分割的目的，因为应用程序的整体加载时间可能更糟。

另外一个选择

就是加载到需要它的组件上。

所以你可以将其放入.vue使用它的 sfc 中：

export default {
  components: {
    Picker: () => import("./emoji-mart-vue")
  }
};

但这将使所有使用它的组件都需要添加它，但是，这可能对代码分割有好处，因为它只会在第一次需要时加载，所以如果用户降落在不存在的路线上不需要它，加载时间会更快。

一个巧妙的方法来解决它

可以通过在另一个加载时使用占位符组件来完成

const Picker= () => ({
  component: import("./emoji-mart-vue"),
  loading: SomeLoadingComponent
});
Vue.component("picker", Picker);

或者如果您不想加载另一个组件（SomeLoadingComponent），您可以传递这样的模板

const Picker= () => ({
  component: import("./emoji-mart-vue"),
  loading: {template:`<h1>LOADING</h1>`},
});
Vue.component("picker", Picker);