Vue之路由懒加载

路由懒加载：把不同路由对应的组件分割称成不同的代码块，然后当路由被访问的时候才加载对应组件

Vue中实现路由懒加载的方法：结合Vue的异步组件和webpack的代码分割功能，轻松实现路由组件的懒加载

Vue异步组件

 {
  components: {
     custom: (resolve,reject) => {}
  }

  }

webpack代码分割功能

  require.ensure代码分块

  require.ensure(依赖,回调函数,[chunk名字])

  import函数

看个小例子：

路由懒加载：

1、使用require.ensure代码分块

let Layout = (resolve)=>{//Vue异步组件
  return require.ensure([],()=>{//webpack代码分割
    resolve(require('@/views/layout'))
  })
}

在这个回调函数中还可以添加第三个参数（chunk参数）：

let Layout = (resolve)=>{//Vue异步组件
  return require.ensure([],()=>{//webpack代码分割
    resolve(require('@/views/layout'))
  },"csdn")
}

2、除了上面的方法，我们也可以使用动态import语法来定义代码分块点，所以上面的也可以写成：

let Layout = (resolve)=>{//Vue异步组件
  return import('@/views/layout')
}

代码简洁多了哈

组件按组分块

如果我们想要把某个路由下的所有组件都打包在同个异步块（chunk)中。只需要让他们的第三个参数一样即可)如下示例

let Workbench = (resolve)=>{
  return require.ensure([],()=>{
    resolve(require('@/views/backend/workbench'))
  },"csdn")
}

let Doc = (resolve)=>{
  return require.ensure([],()=>{
    resolve(require('@/views/backend/doc'))
  },"csdn")
}

同样的，也可以使用import函数实现把组件按组分块：

如下所示：只需要使用命名chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

let Workbench = (resolve)=>{
  return import(/* webpackChunkName:"group-csdn" */ '@/views/backend/workbench')
}
let Doc = (resolve)=>{
  return import(/* webpackChunkName:"group-csdn" */ '@/views/backend/doc')
}

在routes中的配置：不需要怎么改变，还是下面的这种格式（和直接写组件名一样哈）

routes:[
  {
       path:'/management',
       name:'Management',
       component:Layout,//可以直接写一个组件，也可以是一个异步的回调函数
  }

]

路由懒加载：

组件按组分块

猜你喜欢