Vue路由器在启动时加载我所有懒惰加载的组件

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-如果您看到带有rel="prefetch"的<link>标记和您的懒惰加载块，这就是Vue CLI自动预取。在上面的链接上，你可以阅读如何禁用或微调

2. 检查开发工具中的网络选项卡，并选择一个懒惰加载的块-查看请求标头并查找Purpose: prefetch(Firefox使用X-Moz prefetch(。如果你发现了这个，那就意味着浏览器请求区块是因为prefetch链接。。。

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

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

这是我的一个应用程序的屏幕截图。这是Vue CLI应用程序，只有一个惰性路由("admin"(。看起来DOMContentLoaded事件(蓝色DCL(和First Paint(绿色FP(与admin98...块完成加载奇怪地相关，所以我的应用程序的第一次绘制可能被我的懒惰加载"阻止；管理员"；块

但如果你仔细看，你会发现有一个任务正在运行("分析HTML"+"评估脚本"-在屏幕截图中选择(-它从最后一个"；非预取"；脚本被加载(在这种情况下为"块供应商"(并且意外地同时完成；管理员"；块加载完成。所以浏览器正在解析我的应用程序的其他非懒惰加载的JS，同时下载预取脚本。很明显，预取懒惰加载的区块不会阻止或延迟我的应用程序第一次绘制，即使看起来如此…

这只是的一个例子