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

【问题标题】：Vue Router loads all my lazy-loaded components at startupVue Router 在启动时加载我所有的延迟加载组件
【发布时间】：2021-03-17 09:49:55
【问题描述】：

我有一个带有延迟加载路由器的 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 用作 suggested in the doc

babel.config.js

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

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

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

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

【问题讨论】：

我认为您无需安装任何 Babel 插件即可在 Vue CLI 应用程序中使用动态导入。你可以试试广告删除它吗？
还要确保这不是prefetching，您可以构建应用程序并检查index.html 中的prefetch 链接
实际上，在看到官方文档说它是必需的之前，我没有安装这个动态导入，但它并没有改变任何事情。关于prefecting，你是对的，我看到的都是prefetch，但我想知道为什么要先下载它们。

标签： javascript vue.js webpack babeljs

【解决方案1】：

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

构建您的应用程序并查看生成的index.html - 如果您看到带有rel="prefetch" 的<link> 标记和您的延迟加载块，这是prefetching Vue CLI 自动执行的。在上面的链接中，您可以了解如何禁用或微调它
检查开发工具中的网络选项卡并选择一个延迟加载的块 - 查看请求标头并查找 Purpose: prefetch（Firefox 使用 X-Moz prefetch）。如果你发现这个，这意味着浏览器请求该块是因为prefetch链接...

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

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

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

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

这只是一个例子

【讨论】：