異步組件

異步組件介紹

在開發(fā)大型項目的時候，我們會把大型項目根據(jù)組件分割為小塊代碼，然后異步加載代碼塊，這樣可以讓首屏部分代碼塊優(yōu)先加載，加快首屏渲染速度，其他代碼塊在需要的時候再加載，加載過的代碼塊會被緩存起來，以便復(fù)用重新渲染。

異步組件聲明

異步組件聲明有兩種方式，通過工廠函數(shù)

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)
})

還可以通過工廠函數(shù)，返回一個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')
  }
})

總結(jié)通過工廠函數(shù)的resolve或者返回一個Promise對象來聲明異步組件

高級異步組件

const asyncComponent = () => ({
  component: './my-async-component',
  delay: 200, // 延遲加載，默認(rèn)200毫秒
  error: errorComponent, // 加載失敗顯示組件
  loading: loadingComponent, // 加載時使用組件
  timeout: 2000 // 超時時間，默認(rèn) Infinity
})

路由懶加載

路由懶加載介紹

通過異步組件和webpacm代碼分割，實現(xiàn)路由懶加載，按需加載，提升路由頁面加載速度。

路由懶加載方法

通過工廠函數(shù)返回一個Promise對象，異步加載組件

import() 返回一個promise對象

import('./my-component') 

那么通過工廠函數(shù)返回

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')
    }
]