vue 異步組件
在開發(fā)過程中宰啦，我們可能需要將應(yīng)用分割成小一些的代碼塊轮傍，并且只在需要的時(shí)候才從服務(wù)器加載一個(gè)模塊秕重。
vue 以一個(gè)工廠函數(shù)正林，動(dòng)態(tài)導(dǎo)入組件泡一，異步解析組件定義的過程我們稱之為異步組件。
只有在這個(gè)組件需要被渲染的時(shí)候才會(huì)觸發(fā)該工廠函數(shù)觅廓，因此我們可以通過異步組件實(shí)現(xiàn)組件的懶加載鼻忠。
vue 異步組件動(dòng)態(tài)導(dǎo)入的方式
1. require 動(dòng)態(tài)導(dǎo)入
這個(gè)工廠函數(shù)會(huì)收到一個(gè) resolve 回調(diào)，這個(gè)回調(diào)函數(shù)會(huì)在從服務(wù)器得到組件定義的時(shí)候被調(diào)用杈绸。也可以調(diào)用 reject(reason) 來表示加載失敗帖蔓。
Vue.component(
'async-webpack-example',
// 這個(gè)特殊的 `require` 語法將會(huì)告訴 webpack
// 自動(dòng)將你的構(gòu)建代碼切割成多個(gè)包，這些包
// 會(huì)通過 Ajax 請(qǐng)求加載
resolve => require(['./my-async-component'], resolve)
)
2. import 動(dòng)態(tài)導(dǎo)入
可以在工廠函數(shù)中返回一個(gè) Promise瞳脓，我們可以這樣使用動(dòng)態(tài)導(dǎo)入：
Vue.component(
'async-webpack-example',
// 這個(gè)動(dòng)態(tài)導(dǎo)入會(huì)返回一個(gè) `Promise` 對(duì)象塑娇。
() => import('./my-async-component')
)
當(dāng)使用局部注冊(cè)的時(shí)候，也可以直接提供一個(gè)返回 Promise 的函數(shù)：
new Vue({
// ...
components: {
'my-component': () => import('./my-async-component')
}
})
vue組件懶加載和路由懶加載
背景
當(dāng)打包構(gòu)建應(yīng)用時(shí)劫侧，JavaScript 包會(huì)變得非常大埋酬，造成進(jìn)入頁面時(shí)，需要加載過多的內(nèi)容，影響首屏加載速度奇瘦。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件劲弦，提升首屏加載速度耳标。
定義
懶加載也叫延遲加載或按需加載，即在需要的時(shí)候的時(shí)候進(jìn)行加載邑跪。
組件懶加載次坡，即在需要的時(shí)候，加載該異步組件画畅。
路由懶加載砸琅，即在路由激活時(shí)，加載該路由配置下相應(yīng)的異步組件轴踱。
因此我們可以通過vue異步組件實(shí)現(xiàn)組件懶加載和路由懶加載症脂。
具體實(shí)現(xiàn)
1. require 實(shí)現(xiàn)懶加載
// 將原始加載方式
// import UserDetails from './views/UserDetails'
// 替換成
const UserDetails = resolve => require(['./views/UserDetails'], resolve);
2. import 實(shí)現(xiàn)懶加載
完整示例代碼如下
import Vue from 'vue';
import Router from 'vue-router';
// 將原始加載方式
// import UserDetails from './views/UserDetails'
// 替換成
const UserDetails = () => import('./views/UserDetails');
Vue.use(Router);
export default new Router({
// ...
routes: [
{
path: '/users/:id',
component: UserDetails
}
]
});
使用webpack
有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同一個(gè)異步塊 (chunk) 中∫В可以使用 webpackChunkName 注釋語法來提供命名 chunk诱篷，webpack 會(huì)將相同 chunk name 的組件組合到同一個(gè)異步塊中。
const UserDetails = () =>
import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')
關(guān)于import和require的區(qū)別
require 是 CommonJs 的語法雳灵，是動(dòng)態(tài)加載棕所，在運(yùn)行時(shí)加載模塊里的所有方法。require 導(dǎo)出是值的拷貝悯辙，引入的是的是整個(gè)模塊里面的對(duì)象琳省。
import 是 ES6 的語法標(biāo)準(zhǔn)，是靜態(tài)加載躲撰，編譯的時(shí)候調(diào)用针贬，不管在哪里引用都會(huì)提升到代碼頂部。import 導(dǎo)出的是值的引用拢蛋，可以按需引入模塊里面的對(duì)象坚踩。
總結(jié)
組件懶加載，即在需要的時(shí)候瓤狐，加載該異步組件瞬铸。路由懶加載，即在路由激活時(shí)础锐，加載該路由配置下相應(yīng)的異步組件嗓节。
CommonJs 規(guī)范的 require 可以實(shí)現(xiàn)組件和路由的懶加載，ES6 語法標(biāo)準(zhǔn)的 import 也可以實(shí)現(xiàn)皆警。
組件和路由的懶加載拦宣，一般用于首屏優(yōu)化，不立刻請(qǐng)求資源，待首屏加載完畢或者按需響應(yīng)時(shí)再加載資源鸵隧〕衤蓿可以減少首屏加載用時(shí)，減少用戶等待時(shí)長豆瘫，提升用戶體驗(yàn)珊蟀。
