当前位置：首页 > VUE

实现vue路由懒加载

2026-02-21 23:10:02VUE

路由懒加载的原理

路由懒加载通过动态导入（Dynamic Import）实现，将路由对应的组件分离成独立的代码块（chunk），仅在访问该路由时加载对应组件。这种方式能有效减少初始加载时间，提升应用性能。

使用动态导入语法

在Vue Router配置中，用import()动态导入替换静态导入。Webpack会将这种语法自动识别为代码分割点：

实现vue路由懒加载

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

魔法注释定制Chunk名称

通过Webpack魔法注释可自定义生成的chunk名称，便于调试和长期缓存：

const UserDetails = () => import(/* webpackChunkName: "user" */ './views/UserDetails.vue')

路由分组打包

将相关路由分组到同一chunk中，减少请求数量：

实现vue路由懒加载

const routes = [
  {
    path: '/user/:id',
    component: () => import(/* webpackChunkName: "user" */ './views/User.vue'),
    children: [
      {
        path: 'profile',
        component: () => import(/* webpackChunkName: "user" */ './views/UserProfile.vue')
      }
    ]
  }
]

异步组件加载状态处理

为改善用户体验，可定义加载和错误状态组件：

const AsyncComponent = () => ({
  component: import('./MyComponent.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
})

预加载策略

通过Webpack的prefetch/preload指令实现资源预加载：

const Home = () => import(/* webpackPrefetch: true */ './views/Home.vue')

注意事项

确保使用支持动态导入的打包工具（Webpack 4+）
生产环境需配置合理的chunk大小阈值
测试路由切换时的加载性能
考虑SSR场景下的特殊处理

完整配置示例

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
    },
    {
      path: '/about',
      component: () => import(/* webpackPrefetch: true */ '@/views/About.vue')
    }
  ]
})