Vuejs 在没有路由器的情况下延迟加载组件

Question

在vue 中延迟加载组件对于 webpack 来说并不困难：https://alligator.io/vuejs/lazy-loading-vue-cli-3-webpack/

我正在尝试将应用程序的初始负载剥离到绝对裸露的骨架......但我希望能够在没有路由器的情况下触发组件的导入。

例如，此应用的初始加载将加载：

• 一个标题
• 汉堡菜单
• 一个仪表板
  • 一个表单
    • 一个简单的表格
    • 用户操作后，将调用图像上传程序
  • 仪表板筛选器控件
  • 列表视图

在初始加载时，用户必须看到除表单和筛选器控制框之外的所有内容。

根据文档，要延迟加载这些组件，我必须将它们包含在路由器中......但我不希望 url 只是为了打开表单而更改。

如何在没有路由器的情况下延迟将组件加载到视图中？

Answer 1

如果有人需要答案，那就是。
延迟加载已经随 Vue 一起提供，没有任何插件，这是我最近发现的。

当然，这将在没有 Vue 路由器的情况下工作。

const Component1 = () => import(
/* webpackChunkName: "/js/component-name" */ './components/Component1'
)
const Component2 = () => import(
/* webpackChunkName: "/js/component-name2" */ './components/Component2'
)
const app = new Vue({
el: '#app',
components: {
Component1,
Component2
}
})