如何通过 vue-class-component 使用 Vue Router 延迟加载？

Posted 2023-02-23

【中文标题】如何通过 vue-class-component 使用 Vue Router 延迟加载？

【英文标题】：How to use Vue Router's lazy loading with vue-class-component?

【发布时间】：2021-01-26 08:03:07

【问题描述】：

我对 Vue 还是很陌生，并尝试在使用类样式组件的项目上实现延迟加载的路由。目前，组件是使用 Webpack 的动态导入为路由定义的，如下所示：

  path: '/dashboard',
  name: 'dashboard',
  component: function() 
    return import(
      /* webpackChunkName: "dashboard" */ '../components/content-views/content-main/ContentDashboard.vue'
    );
  ,
,

但这似乎不起作用，因为使用空缓存加载应用程序会预先下载所有块，从而产生一个巨大的应用程序文件。阅读documentation，看起来我需要通过返回一个与组件解析的 Promise 来将类组件定义为异步。但是，老实说，我不确定作为类定义的组件是否可能，而不是典型的基于对象的组件。 vue-class-component 文档没有提到这一点，但我想知道是否有某种替代语法可以实现这一点，或者我是否遗漏了其他东西。

感谢任何帮助！

【问题讨论】：

你如何验证所有的块都被预先下载了？仅供参考，import 函数返回一个Promise，因此您无需在组件中担心

查看网络选项卡，基本上每个路由的每个JS文件都在加载。我假设，使用代码拆分，如果组件仅在路由器中呈现特定路由，则简单地导航到默认路由不应加载该组件的代码。在应用程序中，它仅由 router-view 组件呈现。

您实现它的方式似乎是正确的。我有你上面描述的具有相同实现的行为。您是否检查了组件的交叉依赖关系？说你的 Home 组件使用 ContentDashboard 还是它的子组件？

您是否正在查看生产版本（即不是 Webpack 开发服务器）？

【参考方案1】：

这是在 vuejs 中使用惰性路由的方法

path: "/",
    name: "index",
    component: () =>
        import("../views/Index.vue")

【参考方案2】：

正如 MaBbKhawaja 所说，

path: "/",
    name: "index",
    component: () =>
        import("../views/Index.vue")

你也可以像这样分配chunkName

path: "/",
    name: "index",
    component: () =>
        import(/* webpackChunkName: "Home" */ "../views/Index.vue")

The docs gives a better explanation