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

¥When your website/app is small, you can load all layouts/pages/components into the initial bundle and serve everything at startup. But when your code gets complex and has many layouts/pages/components, it won’t be optimal to do this as it will massively impact loading time. Fortunately, there is a way to solve this.

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

¥We’ll cover how you can lazy load / code split parts of your app so that they are automatically requested only on demand. This is done through dynamic imports. Let’s start with an example and then convert it so that we use lazy loading – we’ll focus this example on loading a page, but the same principle can be applied to load anything (assets, JSONs, …).

延迟加载路由页面(Lazy-load router pages)

¥Lazy-load router pages

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

¥It’s normal to use the Vue Router calling static components as below.

import SomePage from 'pages/SomePage.vue'

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

现在让我们修改一下，使用动态导入，使页面仅按需加载：

¥Now let’s change this and make the page be loaded on demand only, using dynamic imports:

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

很简单，对吧？它的作用是，它会为 /src/pages/SomePage.vue 创建一个单独的块，然后仅在需要时加载。在这种情况下，当用户访问 ‘/some-page’ 路由时。

¥Easy, right? What this does is that it creates a separate chunk for /src/pages/SomePage.vue which is then loaded only when it is needed. In this case, when a user visits the ‘/some-page’ route.

延迟加载组件(Lazy-load components)

¥Lazy-load components

通常情况下，你需要导入一个组件，然后将其注册到页面、布局或组件。

¥Normally you would import a component and then register it to the Page, Layout or Component.

<script>
import SomeComponent from 'components/SomeComponent.vue'

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

现在让我们修改一下，使用动态导入，使组件仅按需加载：

¥Now let’s change this and make the component be loaded on demand only, using dynamic imports:

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

动态延迟加载(Lazy-load on the fly)

¥Lazy-load on the fly

正如你在上面注意到的，我们使用动态导入（import('..resource..')）而不是常规导入（import Resource from './path/to/resource'）。动态导入本质上是返回一个你可以使用的 Promise：

¥As you noticed above, we’re using dynamic imports (import('..resource..')) instead of regular imports (import Resource from './path/to/resource'). Dynamic imports are essentially returning a Promise that you can use:

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
  })

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

¥One advantage of using dynamic imports as opposed to regular imports is that the import path can be determined at runtime:

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

使用 Vite 导入(Importing with Vite)

¥Importing with Vite

动态导入语句(Dynamic import statements)

¥Dynamic import statements

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 ]
  }
})

其他导入选项(Other import options)

¥Other import options

更多关于使用 Vite 此处 导入资源的信息。

¥More info on importing assets with Vite here.