Vue 异步组件&路由懒加载

异步组件

异步组件介绍

在开发大型项目的时候，我们会把大型项目根据组件分割为小块代码，然后异步加载代码块，这样可以让首屏部分代码块优先加载，加快首屏渲染速度，其他代码块在需要的时候再加载，加载过的代码块会被缓存起来，以便复用重新渲染。

异步组件声明

异步组件声明有两种方式，通过工厂函数

Vue.component('async-example', function (resolve, reject) {
  resolve({
    template: '<div>hello vue !</div>'
  })
})

也可以通过webpack 的 code-splitting 功能一起配合使用：

Vue.component('async-wepack-example', function (resolve) {
  // require会告诉webpack将你的代码切割成多个包，然后通过ajax加载    
  require(['./my-async-component'], resolve)
})

还可以通过工厂函数，返回一个promise对象

const Foo = () => Promise.resolve({
  template: '<div>hello vue !</div>'
})

或者通过 import()

Vue.component('async-wepack-example', () => import('./my-async-component'))

局部组件注册异步组件

new Vue({
  components: {
    myComponent: () => import('./my-async-component')
  }
})

总结通过工厂函数的resolve或者返回一个Promise对象来声明异步组件

高级异步组件

const asyncComponent = () => ({
  component: './my-async-component',
  delay: 200, // 延迟加载，默认200毫秒
  error: errorComponent, // 加载失败显示组件
  loading: loadingComponent, // 加载时使用组件
  timeout: 2000 // 超时时间，默认 Infinity
})

路由懒加载

路由懒加载介绍

通过异步组件和webpacm代码分割，实现路由懒加载，按需加载，提升路由页面加载速度。

路由懒加载方法

通过工厂函数返回一个Promise对象，异步加载组件

import() 返回一个promise对象

import('./my-component') 

那么通过工厂函数返回

var myComponent = () => import('./my-component')

路由引入

const routes = [
    {
     name: "MyCompoent",
     path: 'my-compoent',
     component: myComponent
    }
]

把组件按组分块

如果我们想把一些组件和某一个子组件一起打包为代码块，通过添加注释的方式即可

const routes = [
    {
     name: "MyCompoent",
     path: 'my-compoent',
     component: () => import(/* webpackChunkName: 'group-btn' */ './my-component')
    }
]