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

Question

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

我做什么：

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

路由器/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

Answer 1

可能是预取了那些延迟加载块。如果要进一步测试，可以关闭预取。

ref：prefetching