Vue2 - 路由级别的延迟加载不起作用？

Posted 2023-02-23

【中文标题】Vue2 - 路由级别的延迟加载不起作用？

【英文标题】：Vue2 - Lazy loading on route level is not working?

【发布时间】：2020-07-13 09:45:37

【问题描述】：

目前，我正在测试 Vue.js，我想知道它是开箱即用的延迟加载功能。也许我弄错了，但它似乎无法正常工作。

我做了什么：

我通过 Vue CLI 3“vue create vtest”创建了一个新项目，然后我添加了 2 个新组件并将它们作为带有 webpack 块名的异步组件添加到路由器。 Vue 的代码指南中关于代码拆分的入门模板说：

router/index.ts

// this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited.

所以我希望当我访问这些路线之一时它会延迟加载。如果我不访问它们，它们将不会加载。好吧，它们无论如何都会加载，例如当我只访问原始的 Home 组件时，它实际上并没有使用我的 3 个分离的、代码拆分的路由，它们称为 About、Foo 和 Bar。但正如您在我的屏幕截图中看到的那样，它显示了 Home 组件加载的所有请求。

这是我的路线：

const routes = [
  
    path: '/',
    name: 'Home',
    component: Home,
  ,
  
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  ,
  
    path: '/foo',
    name: 'Foo',
    component: () => import(/* webpackChunkName: "foo" */ '../views/Foo.vue'),
  ,
  
    path: '/bar',
    name: 'Bar',
    component: () => import(/* webpackChunkName: "bar" */ '../views/Bar.vue'),
  ,
];

这是我的存储库，与 Vue CLI 的入门模板只有很少的区别：

https://github.com/hellokvn/vue-test

【参考方案1】：

它可能正在预取那些延迟加载块。如果您想进一步测试，可以关闭预取。

参考：prefetching