在 vue3 中延迟加载路由器非常慢答案

【问题标题】：Lazy loading router very slow in vue3在 vue3 中延迟加载路由器非常慢
【发布时间】：2022-12-12 15:27:32
【问题描述】：

我尝试使用这种技术：const Foo = () => import ('./ Foo.vue'); 对于我的路由器，但奇怪的是，当我将我的应用程序带到服务器时，打开 SPA 页面需要很长时间。

如果我使用import Test from('./ Foo.vue');，一切都会快得多。这是为什么？

PS：我使用vite + vue 3

【问题讨论】：

目前尚不清楚为什么会发生这种情况。参见stackoverflow.com/help/how-to-ask和stackoverflow.com/help/mcve。您可以在 devtools 中检查哪些请求最长，以及为什么，但目前只有您可以这样做

【解决方案1】：

也许问题出现是因为您正在尝试使用 Vue 2.x 语法延迟加载组件，使用动态 import()

在 Vue 3.x 中，您需要将要延迟加载的组件包装在 defineAsyncComponent 中：

import { defineAsyncComponent } from 'vue'

const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

这是Vue 3 migration guide中关于此的部分

【讨论】：