Vue Academy · 课时

懒加载与代码拆分

Q: 「懒加载与代码拆分」这节课中我会学到什么？

拆分代码包，并对组件和路由进行懒加载 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

拆分代码包，并对组件和路由进行懒加载

懒加载与代码拆分 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。

为什么包体积很重要

当所有内容都打包在一个大型 JavaScript 文件中时，用户需要等待更长时间才能看到首屏。代码拆分会将应用拆分为更小的代码块，仅在需要时加载，从而缩小初始下载量并加快启动速度。

动态 import()

关键工具是动态 import() 函数。它不同于文件顶部的静态导入，会按需加载模块并返回一个 promise。打包工具会将每个动态导入拆分为独立的代码块。

const module = await import("./heavyModule.js")
module.doSomething()

按路由拆分代码

按路由拆分代码可以带来最大的收益，让每个页面加载自己的代码。在 Vue Router 中，请传入一个返回动态导入的函数，而不是直接导入组件。

const routes = [
  {
    path: "/dashboard",
    component: () => import("./views/Dashboard.vue")
  }
]

静态路由与懒加载路由

比较这两种方式。静态导入会将组件打包到主代码块中；懒加载版本则会创建一个独立的代码块，只有在访问该路由时才会获取。

// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"

// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")

defineAsyncComponent

要在路由器之外懒加载组件，请使用 defineAsyncComponent 包装动态导入。Vue 只会在组件首次渲染时加载它。

import { defineAsyncComponent } from "vue"

const Chart = defineAsyncComponent(() =>
  import("./components/HeavyChart.vue")
)

注册异步组件

像注册其他组件一样注册异步组件，然后在模板中使用它。Vue 会透明地处理加载过程。

export default {
  components: {
    HeavyChart: defineAsyncComponent(() =>
      import("./components/HeavyChart.vue")
    )
  }
}

加载状态和错误状态

defineAsyncComponent 的高级形式接受一些选项，可以在加载期间显示占位内容，并在加载失败时显示备用内容。

const Chart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: Spinner,
  errorComponent: LoadError,
  delay: 200,
  timeout: 5000
})

懒加载大型组件

适合懒加载的对象包括体积较大或很少使用的部分：图表、富文本编辑器、地图，或只有部分用户会打开的模态对话框。

const RichEditor = defineAsyncComponent(() =>
  import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shown

使用 v-if 条件加载

将异步组件与 v-if 配合使用，这样只有在用户触发它时才会获取对应的代码块。

<template>
  <button @click="showEditor = true">Edit</button>
  <RichEditor v-if="showEditor" />
</template>

用于调试的命名代码块

Webpack 风格的魔法注释可以为代码块提供易读的名称，让您更容易检查网络面板和构建输出。

const Reports = () => import(
  /* webpackChunkName: "reports" */ "./views/Reports.vue"
)

评估影响

拆分后，请检查构建输出或浏览器的网络面板。您应该会看到多个较小的分块文件，而不是一个大型捆绑包，并且初始加载所需下载的代码会减少。

快速检查

检验您对延迟加载的掌握情况。

回顾

使用动态 import() 进行代码拆分可以减小初始捆绑包。对于延迟加载的路由，请使用返回导入函数的函数；对于按需加载的组件，请使用 defineAsyncComponent，还可以选择配置加载和错误状态。请对体积较大或很少使用的部分进行延迟加载，以保持快速启动。接下来，您将学习如何通过记忆化缓存并跳过不必要的工作。

常见问题解答

「懒加载与代码拆分」课时是免费的吗？

是的 — 「懒加载与代码拆分」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。

「懒加载与代码拆分」这节课中我会学到什么？

拆分代码包，并对组件和路由进行懒加载你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 3 节。

「懒加载与代码拆分」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy