javascript - vuejs 延迟加载组件，无需路由器

Question

vue 中的延迟加载组件使用 webpack 并不困难:https://alligator.io/vuejs/lazy-loading-vue-cli-3-webpack/

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

例如，此应用程序的初始加载将加载:

• 标题
• 汉堡菜单
• 仪表板
  • 表格
    • 简单的表单
    • 根据用户操作，将调用图像 uploader
  • 仪表板过滤控件
  • ListView

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

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

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

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