Vue Router 在启动时加载我所有的延迟加载组件

Question

我有一个 Vue (vue:2.6 & cli-service:4.1) 应用程序，其延迟加载路由器配置如下：

router.ts

const Grid = () => import(/* webpackChunkName: "grid" */ './views/grid/Grid.vue');
const Calendar = () => import(/* webpackChunkName: "calendar" */ './views/calendar/Calendar.vue');
const Tree = () => import(/* webpackChunkName: "tree" */ './views/tree/Tree.vue');

const routes = [
    { path: '/', component: Grid, name: 'grid' },
    { path: '/calendar', component: Calendar, name: 'calendar' },
    { path: '/tree', component: Tree, name: 'tree' },
];

export const router = new VueRouter({ routes });

我正在使用 Babel，所以我正在使用 dynamic import plugin as suggested in the doc

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
  ],
};

在浏览器中使用该应用程序，单击路线，我可以看到正在加载所需的资产。
但是在第一次加载时我也看到所有的块都加载了。

它似乎不是某些 prefetching 因为这些块都是先加载的，并且在加载所有内容时应用程序不可用。

为什么我的所有块都已加载？我该如何调试它？

Answer 1

首先要确认这真的不是预取...

构建您的应用并查看生成的 index.html - 如果您看到带有 rel="prefetch" 的 <link> 标签和您的延迟加载块，则这是 prefetching Vue CLI 会自动执行。在上面的 link 中，您可以阅读有关如何禁用它或对其进行微调的信息
检查 Dev Tools 中的网络选项卡和 select 您的延迟加载块之一 - 查看请求 headers 并查找 Purpose: prefetch（Firefox 使用X-Moz prefetch)。如果你找到这个，这意味着浏览器请求了块，因为 prefetch link...

现在您可以确认您的感觉，这些块会减慢您应用程序的第一次渲染速度。最好的方法是再次使用开发工具 - 这次是性能（我更习惯 Chrome ...似乎比 Firefox 更好）

Chrome: 只需打开 Dev Tools，切换到 Performance 选项卡并使用带有“Start profiling and reload page”工具提示的小“reload”图标。您可以在页面加载后停止分析。

Here 是我的一个应用程序的屏幕截图。这是只有一个惰性路由（“admin”）的 Vue CLI 应用程序。看起来 DOMContentLoaded 事件（蓝色 DCL）和 First Paint（绿色 FP）奇怪地与 admin98... 块加载完成相关，所以我的应用程序的第一次绘制似乎被我延迟加载的“admin”块阻止了

但是如果你更仔细地看，你会看到有一个任务运行（“解析 HTML” + “评估脚本” - select 在屏幕截图中编辑） - 它当加载最后一个“非预取”脚本时开始（在这种情况下为“chunk-vendors”）并意外地在“admin”块加载完成的同时完成。所以浏览器正在解析我的应用程序的其他 non-lazy 加载的 JS，同时下载预取脚本。很明显，预取延迟加载块不会阻止或延迟我的应用程序第一次绘制，即使它看起来如此...

这只是一个例子

Vue Router 在启动时加载我所有的延迟加载组件

Vue Router loads all my lazy-loaded components at startup

javascript

webpack

vue.js

babeljs