动态导入与懒加载策略

动态导入实现代码按需加载，优化首屏加载性能。

路由懒加载

// Vue Router 懒加载
const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('./views/About.vue')  # 懒加载
  },
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
]

注意：懒加载的页面不会在首屏加载，用户访问时才请求。

组件懒加载

<script setup>
import { defineAsyncComponent } from 'vue'

// 懒加载组件
const HeavyComponent = defineAsyncComponent(() =>
  import('./components/Heavy.vue')
)

// 预加载配置
const preloadComponent = defineAsyncComponent({
  loader: () => import('./components/Preload.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200
})
</script>

预加载策略

// 预加载即将访问的页面
router.beforeEach((to, from, next) => {
  // 预加载下一个路由
  if (to.name === 'about') {
    import('./views/Dashboard.vue')  // 预加载 Dashboard
  }
  next()
})

条件加载

<script setup>
import { ref, onMounted } from 'vue'

const showChart = ref(false)

onMounted(() => {
  // 用户交互时才加载
  // import('./components/Chart.vue')
})
</script>

<template>
  <button @click="showChart = true">显示图表</button>
  <Chart v-if="showChart" />
</template>

首屏优化策略

chunk 命名

// 命名懒加载 chunk
const About = () => import(
  /* webpackChunkName: "about" */
  './views/About.vue'
)

懒加载效果

首屏加载:
- index.js (50KB)
- Home.vue (10KB)

访问 About:
- about.js (20KB)  ← 懒加载
- About.vue (15KB)

要点总结

• 路由级懒加载减少首屏体积
• defineAsyncComponent 懒加载组件
• 预加载提前加载即将访问内容
• 条件加载按用户交互触发