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

需要明确的是，您是在 promise 解析之前直接定义组件，因此为组件分配了 promise，而不是已解析的组件。

解决方案不清楚，依赖"what are you trying to accomplish"

一个可能的解决方案：

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 中执行此操作：组件只有在 DOM 中需要时才会加载，即 v-if 值更改为 true。

<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>

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

Lazy loading a specific component in Vue.js

lazy-loading

vue.js

vue-component

一个可能的解决方案：

另一种选择

机智的解决方法