Ленивая загрузка указанного c компонента в Vue. js - PullRequest
Новая
       23

Ленивая загрузка указанного c компонента в Vue. js

2 голосов
/ 23 марта 2020

Я просто делаю это быстро: при нормальной загрузке компонента (например, компонента "Picker" из пакета emoji-mart- vue) этот синтаксис должен использоваться: 

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

Vue.component("picker", Picker);

И это работает просто хорошо. Но когда я пытаюсь лениво загрузить этот компонент, я не уверен, какой именно код писать. Обратите внимание, что следующий синтаксис, который написан в документации, в этом случае не работает должным образом: 

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

Ответы [ 2 ]

1 голос
/ 23 марта 2020

Я предполагаю, что проблема в том, что вы используете 

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

, чтобы прояснить ситуацию, вы определяете компонент непосредственно до того, как обещание разрешено, поэтому компоненту назначено обещание. вместо разрешенного компонента.

Решение неясно и зависит от того, «что вы пытаетесь выполнить sh»

Одно из возможных решений: 

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

Это (блокирует) ожидание загрузки компонента перед загрузкой остальной части приложения. ИМХО, это противоречит цели разделения кода, поскольку общее время загрузки приложения, вероятно, хуже.

Другой вариант

- загрузить его на компонент, который в нем нуждается.

чтобы вы могли поместить это в .vue sf c, который его использует: 

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);
0 голосов
/ 23 марта 2020

В PluginPicker.vue вы делаете это: 

<template>
  <picker />
</template>

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

И в компе, где вам нравится ленивая загрузка, сделайте это: Компонент не будет загружен, пока он не потребуется в 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>
...