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

Question

目前，我正在测试 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

Answer 1

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

参考：prefetching

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

Vue2 - Lazy loading on route level is not working?

lazy-loading

webpack

vue.js

vuejs2

vue-cli