Vue 2.0新增了的特性之一就是Lazyloading。當(dāng)我們使用Vue來開發(fā)單頁應(yīng)用程序時(shí)，頁面會(huì)加載很多組件和代碼，導(dǎo)致頁面加載較慢。某些頁面上的組件是不必要立即加載的，這時(shí)候就需要使用Vue的懶加載特性來提高代碼的效率。

Vue的懶加載是使用webpack實(shí)現(xiàn)的。我們需要安裝一個(gè)叫做babel-plugin-syntax-dynamic-import的插件來支持ES6的懶加載語法。在我們需要懶加載的組件上使用webpack的內(nèi)置函數(shù)require.ensure()，在組件被訪問時(shí)才會(huì)被加載。

// 懶加載組件
const Home = resolve =>require.ensure(['./Home.vue'], () =>{ resolve(require('./Home.vue')) })
// 路由中定義懶加載的組件
const routes = [
{ path: '/', component: Home }
]
export default new Router({
routes
})

上面的代碼中，我們定義了一個(gè)名為Home的懶加載組件，在訪問該組件時(shí)才會(huì)被加載。顯然這樣可以減少組件和代碼的加載時(shí)間，加快頁面訪問速度。

Vue的懶加載可以應(yīng)用于所有的組件，包括路由組件、單文件組件和動(dòng)態(tài)組件。當(dāng)我們需要懶加載多個(gè)組件時(shí)，可以使用函數(shù)定義組件來避免代碼冗長。

//函數(shù)定義懶加載的組件
const lazyLoadComponent = component =>() =>require.ensure([], () =>component)
const Home = lazyLoadComponent(require('./Home.vue'))
// 路由中定義多個(gè)懶加載的組件
const routes = [
{ path: '/', component: Home },
{ path: '/example', component: lazyLoadComponent(require('./Example.vue')) },
{ path: '/about', component: lazyLoadComponent(require('./About.vue')) }
]
export default new Router({
routes
})

上面的代碼中，我們將多個(gè)懶加載組件函數(shù)定義為一個(gè)名為lazyLoadComponent的函數(shù)，并分別使用該函數(shù)定義每個(gè)懶加載組件，可見代碼簡潔了許多。

總之，Vue的懶加載特性可以讓我們?cè)陂_發(fā)單頁應(yīng)用程序時(shí)更好地提高代碼的效率，減少組件和代碼的加載時(shí)間，使頁面訪問速度更快。