异步组件加载时的Vue检查

Question

我想知道如何检查异步组件何时加载。

通常，我会像这样加载组件：

Vue.component(
     'booking-overlay', 
     () => import('@/components/BookingOverlayAsync.vue')
);

使用这样的东西是行不通的：

Vue.component(
   'booking-overlay',
    () => import('@/components/BookingOverlayAsync.vue').then(() => {
        console.log('component has loaded');
    })
);

这将导致以下错误：

TypeError:无法读取未定义的属性“__esModule”。

组件不再加载，但承诺确实解决了。通过添加then，它不再能解决它自己似乎所做的承诺。

我如何在全球范围内注册这个异步组件，并检查何时加载了JavaScript的这个组件块？

显然，我可以通过设置全局组件来完成这个任务：

import('@/components/BookingOverlayAsync.vue').then(() => {
    console.log('Chunk loaded');
});

不过，这似乎是一个非常丑陋的解决方案。

Answer 1

因为.then函数返回的第二个允诺对象不会继续将加载的异步组件传递给vue lib本身。

Vue.component函数期望第二个参数应该是返回承诺的函数，其中解析的数据必须是异步加载的组件本身。

请试如下：

​

Vue.component(
        'booking-overlay',
        () => import('@/components/BookingOverlayAsync.vue').then(component => {
            console.log('component has loaded');
            return component;
        })
    );

​