路由懒加载 | Vue Router

为什么需要懒加载？

随着应用功能的增加，JavaScript 打包文件会变得越来越大，严重影响页面加载性能。路由懒加载通过代码分割技术，将不同路由对应的组件分割成独立的代码块，只在需要时才加载，从而显著提升应用性能。

基本用法

静态导入 vs 动态导入

静态导入（不推荐用于路由）：

import UserDetails from './views/UserDetails.vue'

const routes = [
  { path: '/users/:id', component: UserDetails }
]

动态导入（推荐）：

// 使用动态导入函数
const UserDetails = () => import('./views/UserDetails.vue')

const router = createRouter({
  routes: [
    { path: '/users/:id', component: UserDetails }
  ]
})

内联动态导入

也可以直接在路由配置中使用动态导入：

const router = createRouter({
  routes: [
    { 
      path: '/users/:id', 
      component: () => import('./views/UserDetails.vue') 
    }
  ]
})

工作原理

Vue Router 的懒加载机制：

1. 首次访问时加载 - 只在第一次进入路由时加载组件
2. 缓存机制 - 后续访问使用缓存，不会重复加载
3. Promise 支持 - 支持任何返回 Promise 的函数

// 支持自定义 Promise 解析
const UserDetails = () =>
  Promise.resolve({
    /* 组件定义对象 */
  })

代码分割分组

Webpack 分组策略

使用特殊的注释语法为相关路由组件分组：

const UserDetails = () =>
  import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
  import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
  import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')

效果：这三个组件会被打包到同一个名为 group-user 的代码块中。

Vite 分组配置

在 Vite 项目中，通过 vite.config.js 配置分组：

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'group-user': [
            './src/views/UserDetails',
            './src/views/UserDashboard',
            './src/views/UserProfileEdit',
          ],
          'group-admin': [
            './src/views/AdminPanel',
            './src/views/UserManagement',
          ]
        },
      },
    },
  },
})

高级懒加载技巧

条件懒加载

const AdminPanel = () => {
  if (user.isAdmin) {
    return import('./views/AdminPanel.vue')
  } else {
    return import('./views/AccessDenied.vue')
  }
}

错误处理

const UserProfile = () => 
  import('./views/UserProfile.vue')
    .catch(() => import('./views/FallbackProfile.vue'))

加载状态组件

const LazyComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200, // 延迟显示加载状态
  timeout: 3000 // 超时时间
})

性能优化策略

1. 预加载策略

// 在用户可能访问的路由上添加预加载
router.beforeEach((to, from) => {
  if (to.meta.preload) {
    // 预加载相关组件
    to.matched.forEach(record => {
      if (record.components) {
        Object.values(record.components).forEach(component => {
          if (typeof component === 'function') {
            component()
          }
        })
      }
    })
  }
})

2. 路由优先级分组

// 高频访问路由 - 单独分组
const Home = () => import(/* webpackChunkName: "critical" */ './views/Home.vue')

// 低频访问路由 - 按功能分组
const Settings = () => import(/* webpackChunkName: "user-settings" */ './views/Settings.vue')
const Profile = () => import(/* webpackChunkName: "user-settings" */ './views/Profile.vue')

// 管理功能 - 单独分组
const Admin = () => import(/* webpackChunkName: "admin" */ './views/Admin.vue')

3. 按页面类型分组

// 认证相关页面
const Login = () => import(/* webpackChunkName: "auth" */ './views/auth/Login.vue')
const Register = () => import(/* webpackChunkName: "auth" */ './views/auth/Register.vue')

// 用户功能页面
const Dashboard = () => import(/* webpackChunkName: "user" */ './views/user/Dashboard.vue')
const Orders = () => import(/* webpackChunkName: "user" */ './views/user/Orders.vue')

实际应用场景

电商网站优化

const routes = [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
  },
  {
    path: '/products',
    component: () => import(/* webpackChunkName: "products" */ './views/Products.vue'),
    children: [
      {
        path: ':id',
        component: () => import(/* webpackChunkName: "products" */ './views/ProductDetail.vue')
      }
    ]
  },
  {
    path: '/checkout',
    component: () => import(/* webpackChunkName: "checkout" */ './views/Checkout.vue')
  }
]

管理后台优化

// 管理员功能单独分组
const AdminRoutes = [
  {
    path: '/admin',
    component: () => import(/* webpackChunkName: "admin" */ './views/admin/Layout.vue'),
    children: [
      {
        path: 'users',
        component: () => import(/* webpackChunkName: "admin" */ './views/admin/Users.vue')
      },
      {
        path: 'analytics',
        component: () => import(/* webpackChunkName: "admin" */ './views/admin/Analytics.vue')
      }
    ]
  }
]

最佳实践

1. 所有路由都使用懒加载

// Good: 所有路由都使用动态导入
const routes = [
  { path: '/', component: () => import('./views/Home.vue') },
  { path: '/about', component: () => import('./views/About.vue') }
]

// Avoid: 混合使用静态和动态导入
const Home = () => import('./views/Home.vue')
import About from './views/About.vue' // 这会使 About 包含在主包中

2. 合理的分组策略

// 按功能模块分组
const UserModule = () => import(/* webpackChunkName: "user-module" */ './user/index.vue')
const AdminModule = () => import(/* webpackChunkName: "admin-module" */ './admin/index.vue')

3. 避免过度分割

// Avoid: 每个组件都单独分组（可能适得其反）
const Button = () => import(/* webpackChunkName: "button" */ './components/Button.vue')
const Input = () => import(/* webpackChunkName: "input" */ './components/Input.vue')

// Good: 相关组件合理分组
const FormComponents = () => import(/* webpackChunkName: "form" */ './components/form/index.vue')

工具和调试

查看代码分割结果

使用 webpack-bundle-analyzer 分析打包结果：

npm install --save-dev webpack-bundle-analyzer
npx webpack-bundle-analyzer dist/stats.json

性能监控

// 监控组件加载时间
const UserProfile = () => {
  const start = performance.now()
  return import('./views/UserProfile.vue').then(component => {
    const loadTime = performance.now() - start
    console.log(`UserProfile 加载时间: ${loadTime}ms`)
    return component
  })
}

🚀 总结：合理使用路由懒加载可以显著提升应用性能，特别是在大型单页应用中。通过科学的代码分割策略，可以在保持良好用户体验的同时优化加载性能。