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'),
    },
  ],
});

根据对代码的评论和 docs 这应该足以延迟加载 About 组件。

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

如果我导航至“关于浏览器”，则会从磁盘缓存中获取脚本：

我很困惑。我原以为只有在导航到“关于”页面后才能看到脚本 about.js 加载。我错过了什么吗？

Answer 1

@TJWeems 指出的 discussion 非常清楚。

使用 webpack-chain 禁用预取插件后，我获得了预期的行为。我刚刚在我的根目录（与 package.json 相同）上创建了一个 vue.config.js，内容如下：

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

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

Vue 在第一次请求时加载所有块

Vue loading all the chunks on the first request

router

lazy-loading

vue.js