原文地址：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')} ]

總結

以上是生活随笔為你收集整理的Vue—核心概念—异步组件和路由懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。