<template>
<div>
<component :is="componentInstance" />
</div>
</template>
<script>
export default {
props: {
isCompany: { type: Boolean, default: false },
},
computed: {
componentInstance () {
const name = this.isCompany ? 'CompanyInfo' : 'UserInfo'
return () => import(`./components/${name}`)
}
}
}
</script>
有了上面的解決方案陶缺，
import就變成了一個返回Promise的函數(shù)。如果Promise resolves(也就是說洁灵，沒有任何中斷和rejected)饱岸，它將在運行時加載所需的模塊。
那么徽千，這里發(fā)生了什么?我們仍然使用我們的新朋友
<component/>苫费，提供一個完整的組件對象。
如文檔中所述双抽，:is, 和prop可以包括以下兩種:
已注冊組件的名稱百框，或
組件的選擇對象
砰!組件的選擇對象。這正是我們需要的!
注意我們避免導入和注冊組件,因為在運行時動態(tài)導入這樣做?牍汹。
官方文檔中有更多關于Vue和動態(tài)導入的信息铐维。
一個小問題
注意我們訪問了這個道具。是動態(tài)導入語句之外的公司慎菲。
這是必須的嫁蛇，因為否則Vue無法執(zhí)行其反應魔法并在道具更改時更新計算值。試一試露该，你就會明白我的意思了睬棚。
通過訪問動態(tài)導入之外的道具(通過創(chuàng)建一個簡單的name變量)，Vue知道組件實例computed屬性“依賴”于此有决。因此闸拿，當我們的道具發(fā)生變化時空盼，它將有效地引發(fā)重新評估书幕。
提醒一句(8月4日更新)
當使用動態(tài)導入時，Webpack將(在構建時)為每個匹配導入函數(shù)中的表達式的文件創(chuàng)建一個塊文件揽趾。
上面的示例有點做作台汇，但假設my /components文件夾包含800個組件。然后Webpack會創(chuàng)建800個塊篱瞎。
因為這不是我們想要的(呵呵)苟呐，所以確保您編寫更嚴格的表達式和/或遵循文件夾約定。例如俐筋，我傾向于將要分割的組件分組到一個名為/components/chunks或/components/bundle的文件夾中牵素，這樣我就知道哪些組件是Webpack分割的。
除此之外澄者，我們還得到了一個慣用的笆呆、簡潔的模式请琳。它有一個奇妙的副作用，使它真正發(fā)光:
我們的“條件”組件現(xiàn)在被分割了!
如果你像這樣運行npm構建一個組件赠幕，你會注意到Webpack會為UserInfo創(chuàng)建一個特定的bundle文件俄精。另外一個是關于companyinfo。vue的榕堰。Webpack默認情況下會這樣做竖慧。Webpack是純愛?。
這很好逆屡，因為用戶在應用程序請求這些包之前不會加載它們圾旨，從而減少了初始包大小并提高了應用程序的性能。
代碼將是涂料魏蔗。確保你熟悉它碳胳，因為如果你還沒有使用它，你可以大大提高你的應用程序沫勿。就去做吧!
