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 - 如果您看到帶有rel="prefetch"的<link>標記和您的延遲加載塊，這是 Vue CLI 自動執行的預取操作。 在上面的鏈接中，您可以閱讀有關如何禁用它或對其進行微調的信息

2. 檢查開發工具中的網絡選項卡和 select 您的延遲加載塊之一 - 查看請求標頭並查找Purpose: prefetch （Firefox 使用X-Moz prefetch ）。 如果你發現這個，這意味着瀏覽器請求了這個塊，因為prefetch鏈接......

現在您可以確認這些塊會減慢您的應用程序第一次渲染的感覺。 最好的方法是再次使用開發工具——這次是性能（我更習慣 Chrome ......似乎比 Firefox 更好）

Chrome：只需打開開發工具，切換到性能選項卡並使用帶有“開始分析和重新加載頁面”工具提示的小“重新加載”圖標。 您可以在頁面加載后停止分析。

這是我的一個應用程序的屏幕截圖。 這是一個只有一個惰性路由（“admin”）的 Vue CLI 應用程序。 似乎 DOMContentLoaded 事件（藍色 DCL）和 First Paint（綠色 FP）與admin98...塊已完成加載，因此我的應用程序的第一次繪制似乎被我延遲加載的“管理員”塊阻止了

但是，如果您仔細觀察，您會看到正在運行的任務（“解析 HTML”+“評估腳本” - 在屏幕截圖中選擇） - 它在加載最后一個“非預取”腳本時開始（“塊供應商”在這種情況下）並意外地在“管理員”塊加載完成的同時完成。 所以瀏覽器正在解析我的應用程序的其他非延遲加載的 JS，同時下載預取腳本。 很明顯，預取延遲加載的塊不會阻塞或延遲我的應用程序第一次繪制，即使它看起來如此......

這只是一個例子