Vue 非同步元件&路由懶載入

wdapp發表於2020-02-14
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')
    }
]
複製程式碼

相關文章