Как лениво загрузить компонент и шаблон

Question

Мне удалось лениво загрузить компоненты, и мне удалось лениво загрузить шаблоны, но мне не удалось объединить эти два.

Вот как я лениво загружаю компонент:

// This is in my main.js
const router = new VueRouter({
    routes: [
        { path: '/lazy', component: () => import('./lazy.js') }
    ]
})

// And this is in lazy.js
export default {
    template: '<div>Lazy loaded component</div>'
}

Это прекрасно работает, и я вижу, что lazy.js не загружается, пока я не перехожу к /lazy.

Вот как я лениво загружаю шаблон:

// All of this is in my main.js
const lazyTemplate = Vue.component('lazyComponent', function(resolve) {
    fetch('./lazy.html')
        .then(response => response.text())
        .then(function(data) {
            resolve({
                template: data
            });
        });
});

const router = new VueRouter({
    routes: [
        { path: '/lazy', component: lazyTemplate }
    ]
});

Опять же, это работает очень хорошо, и я вижу, что lazy.html не загружается, пока я не перехожу к /lazy.

Но моя главная проблема в том, что я просто не могу понять, как объединить их с методами,Как я могу "родным" (без т. Е. Webpack) лениво загрузить компонент, который лениво загружает шаблон?

Answer 1

Я бы попробовал этот шаблон Как насчет разделения проблем

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

, который представляет собой небольшой вариант того, что вы уже делаете, но это означает, что шаблон не должен бытьскомпилировано в браузере (размер приложения меньше, чем у компилятора Vue).

Answer 2

Загрузите и шаблон, и компонент, лениво и асинхронно, а затем сложите их вместе перед разрешением Обещания:

const lazyComponent = Vue.component('lazyComponent', function(resolve) {
  Promise.all([
    // fetch html template independently
    fetch('./lazy.html').then(response => response.text()),
    // fetch component js independently
    import('./lazy.js')
  ]).then(([template, module] => {
    // add template to component after both load
    let component = module.default;
    component.template = template;
    // return component with template
    resolve(component);
  }));
});

const router = new VueRouter({
    routes: [
        { path: '/lazy', component: lazyComponent }
    ]
});