在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);

Answer 2

在PluginPicker.vue中，您将执行以下操作：

<template>
  <picker />
</template>

<script>
  import { Picker } from "./emoji-mart-vue";
  export default {
    components: { Picker }
  }
</script>

并且在您想延迟加载的comp中执行以下操作：在v-if值更改为true时，直到DOM中需要该组件时，才会加载该组件。

<template>
  <div>
    <plugin-picker v-if="compLoaded" />
  </div>
</template>

<script>
const PluginPicker = () => import('./PluginPicker.vue')
export default {
  data() = { return { compLoaded: false }}
  components: { PluginPicker }
}

// Another syntax
export default {
  components: {
    PluginPicker: () => import('./PluginPicker.vue')
  }
}
</script>