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

Question

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

路由器.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，所以我按照文档中的建议使用动态导入插件

babel.config.js

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

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

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

为什么我的所有块都被加载了？我该如何调试呢？

Answer 1

首先要确认这确实不是预取......

1. 构建您的应用程序并查看生成的内容index.html- 如果您看到带有延迟加载块的<link>标签，则这是Vue CLI 自动执行的预取。在上面的链接上，您可以阅读有关如何禁用它或微调它的信息rel="prefetch"

2. 检查开发工具中的网络选项卡并选择延迟加载的块之一 - 查看请求标头并查找Purpose: prefetch（Firefox 使用X-Moz prefetch）。如果您找到此内容，则意味着浏览器由于prefetch链接而请求了该块...

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

Chrome：只需打开开发工具，切换到“性能”选项卡，然后使用带有“开始分析并重新加载页面”工具提示的小“重新加载”图标。您可以在页面加载后停止分析。

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

但如果你仔细观察，你会发现有一个任务正在运行（“解析 HTML”+“评估脚本”- 在屏幕截图中选择）- 它在加载最后一个“非预取”脚本时启动（“chunk-vendors”在这种情况）并且意外地在“admin”块加载完成的同时完成。因此，浏览器正在解析我的应用程序的其他非延迟加载的 JS，同时下载预取脚本。很明显，预取延迟加载的块不会阻止或延迟我的应用程序第一次绘制，即使看起来如此......

这只是一个例子