延迟加载/代码分割 | Quasar 框架

使用 Vite 的 Quasar CLI - @quasar/app-vite

延迟加载 / 代码拆分

当您的网站/应用程序很小时，您可以将所有布局/页面/组件加载到初始捆绑包中，并在启动时提供所有内容。但是，当您的代码变得复杂并具有许多布局/页面/组件时，这样做将不是最佳选择，因为它会极大地影响加载时间。幸运的是，有一种方法可以解决这个问题。

我们将介绍如何延迟加载/代码拆分应用程序的各个部分，以便仅在需要时自动请求它们。这是通过动态导入来实现的。让我们从一个示例开始，然后将其转换为使用延迟加载 - 我们将专注于加载页面，但相同的原理可以应用于加载任何内容（资产、JSON 等）。

延迟加载路由页面

通常使用 Vue Router 调用静态组件，如下所示。

警告

Quasar 文档假设您已经熟悉 Vue Router。下面仅描述了如何在 Quasar CLI 项目中使用它的基本知识。有关其所有功能的完整列表，请访问 Vue Router 文档。

import SomePage from 'pages/SomePage'

const routes = [
  {
    path: '/some-page',
    component: SomePage
  }
]

现在让我们更改此设置，并使用动态导入按需加载页面。

const routes = [
  {
    path: '/some-page',
    component: () => import('pages/SomePage')
  }
]

很简单吧？这样做的目的是为 /src/pages/SomePage.vue 创建一个单独的块，然后仅在需要时加载它。在本例中，当用户访问“/some-page”路由时。

延迟加载组件

通常，您将导入组件，然后将其注册到页面、布局或组件。

<script>
import SomeComponent from 'components/SomeComponent'

export default {
  components: {
    SomeComponent,
  }
}
</script>

现在让我们更改此设置，并使用动态导入按需加载组件。

<script>
import { defineAsyncComponent } from 'vue'
export default {
  components: {
    SomeComponent: defineAsyncComponent(() => import('components/SomeComponent')),
  }
}
</script>

动态延迟加载

如您在上面所见，我们使用动态导入（import('..resource..')）而不是常规导入（import Resource from './path/to/resource'）。动态导入实际上会返回一个 Promise，您可以使用它

import('./categories.json')
  .then(categories => {
    // hey, we have lazy loaded the file
    // and we have its content in "categories"
  })
  .catch(() => {
    // oops, something went wrong...
    // couldn't load the resource
  })

使用动态导入相对于常规导入的一个优点是导入路径可以在运行时确定

import('pages/' + pageName + '/' + idWithExtension)

使用 Vite 导入

动态导入语句

const importList = import.meta.glob('./pages/*.vue')
const startIndex = '/pages/'.length

const routes = Object.keys(importList).map(key => {
  return {
    path: key.substring(startIndex, key.length - 4),
    component: importList[ key ]
  }
})

其他导入选项

有关使用 Vite 导入资产的更多信息，请点击此处。

发现错误？在浏览器中编辑此页面

1. 简介

2. 延迟加载路由页面

3. 延迟加载组件

4. 动态延迟加载

5. 使用 Vite 导入

5.1. 动态导入语句

5.2. 其他导入选项