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

我们将介绍如何延迟加载/编码拆分应用程序的部分，以便仅在需要时自动请求它们。 这是通过动态导入完成的。 让我们从一个例子开始，然后转换它，以便我们使用延迟加载 - 我们将聚焦这个加载一个页面的例子，但同样的原则可以应用于加载任何东西（资源、JSONs、…）：

延迟加载路由页面

使用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创建一个单独的块，只有在需要时才加载。 在这个例子中，指当用户访问’/same-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 => {
    // 嘿, 我们已经延迟加载了这个文件
    // 并且我们有了"categories"中的内容
  })
  .catch(() => {
    // 哦, 哪里出错了...
    // 不能加载资源
  })

用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导入资源的更多信息这里。