Vue Webpack 加载代码拆分文件并显示加载器

Question

我目前正在使用 Vue 和 Vue-Webpack 进行代码拆分。

在我的 router/index.html 中，我执行以下操作：

const Dashboard = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard.vue');

这很好用，组件正在加载，但没有向用户显示加载反馈。是否有任何代码可以在用户请求加载组件和实际完成之间注入？

干杯， 欧文

Answer 1

动态导入返回一个承诺，因此您应该能够按照以下方式做一些事情：

Dashboard.then(() => {
    // Remove your spinner or loading animation.
})

在导入之前，您总是会显示您的微调器，并且在您的 then 解析中，您会删除它。

动态导入的工作量不大，所以这可能行不通。