Vue Router 在启动时加载我所有延迟加载的组件 [英] Vue Router loads all my lazy-loaded components at startup

问题描述

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

I have a Vue (vue:2.6 & cli-service:4.1) application with a lazy loading router configured like this:

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导入插件作为在文档中建议

I'm using Babel so I'm using the 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',
  ],
};

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

Using the application in a browser, clicking on a route, I can see the required assets getting loaded.
But at first loading I also see all the chunks loaded.

这似乎不是一些预取因为这些块都是先加载的，而应用程序在加载所有内容时都无法使用.

It doesn't seem to be some prefetching because these chunks are all loaded first and the app is not usable while everything is loading.

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

Why all my chunks are loaded ? How can I debug that ?

推荐答案

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

First thing is to confirm this is really not prefetching...

1. 构建您的应用并查看生成的 index.html - 如果您看到带有 rel="prefetch" 的 标签 和你的延迟加载块，这是预取 Vue CLI 会自动执行.在上面的链接中，您可以了解如何禁用或微调它

1. Build your app and look at the generated index.html - if you see <link> tags with rel="prefetch" and your lazy loading chunks, this is prefetching Vue CLI does automatically. On the link above you can read about how to disable it or fine tune it

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

Check the network tab in Dev Tools and select one of your lazy loaded chunks - look at the Request headers and look for Purpose: prefetch (Firefox uses X-Moz prefetch). If you find this, it means that browser requested the chunk because of prefetch link...

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

Now you can confirm your feeling that these chunks slow down your app 1st render. Best way is again using Dev Tools - this time the Performance (I'm more used to Chrome ...seems better than Firefox)

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

Chrome: Just open Dev Tools, switch to Performance tab and use small "reload" icon with "Start profiling and reload page" tooltip. You can stop the profiling after page is loaded.

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

Here is the screenshot of one of mine apps. This is Vue CLI app with just one lazy route ("admin"). It may seem like DOMContentLoaded event (blue DCL) and First Paint (green FP) strangely correlate with admin98... chunk finished loading so it may seem my app's 1st paint is blocked by my lazy loaded "admin" chunk

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

But if you look more carefully you will see there is a task running ("Parse HTML" + "Evaluate Script" - selected in the screenshot) - it starts when the last "non prefetch" script is loaded ("chunk-vendors" in this case) and accidentally finishes at the same time "admin" chunk loading is finished. So the browser is parsing other non-lazy loaded JS of my app and at the same time downloading prefetch scripts. It is clear that prefetching lazy loaded chunk do not block or delay my app 1st paint even it may seem so...

这只是一个例子

这篇关于Vue Router 在启动时加载我所有延迟加载的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！