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

惰性地异步加载模板和组件，然后将它们添加到一起以解决Promise：

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 }
    ]
});

Answer 2

我会尝试这种模式What About Separation of Concerns

<!-- 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编译器，因此应用程序尺寸更小）。

如何延迟加载组件和模板

2 个答案: