开发喵星球

在单页应用中，进入首页时，如果需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

1、静态路由懒加载方式

自定义在router\index.js

{
  path: '/xxxx',
  name: 'xxxx',
  component: () => import('@/views/xxxx')
}

2、动态路由懒加载方式

在store\modules\permission.js修改成import方式

export const loadView = (view) => {
  if (process.env.NODE_ENV === 'development') {
    return (resolve) => require([`@/views/{view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`@/views/{view}`)
  }
}