Vue在第一个请求中加载所有块

Question

我正在学习Vue，我刚到了路由章节。我能够创建一个带有vue/cli的模板项目，并具有初始的路由器配置。这是路由器代码：

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  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'),
    },
  ],
});

根据代码和文档上的内容，这应该足以延迟加载About组件。

当我尝试加载应用程序页面时，将获取"about.js“脚本：

​

​

如果我导航到有关浏览器，则从磁盘缓存中获取脚本：

​

​

我搞糊涂了。我原以为只有在导航到About页面之后才会看到加载脚本about.js。我是不是遗漏了什么？

Answer 1

@TJWeems指出的讨论非常明确。

在禁用webpack链预取插件后，我得到了预期的行为。我刚刚在我的根dir上创建了一个vue.config.js (与package.json相同)，其内容如下：

module.exports = {
    chainWebpack: (config) => {
        config.plugins.delete('prefetch');
    }
};

只是为了记住我这么做是为了好奇。我可能会让预取插件在未来的项目中启用，并考虑在特定情况下禁用它。