<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的函数。如果Promise resolves(也就是说，没有任何中断和rejected)，它将在运行时加载所需的模块。
那么，这里发生了什么?我们仍然使用我们的新朋友
<component/>，提供一个完整的组件对象。
如文档中所述，:is, 和prop可以包括以下两种:
已注册组件的名称，或
组件的选择对象
砰!组件的选择对象。这正是我们需要的!
注意我们避免导入和注册组件,因为在运行时动态导入这样做❤。
官方文档中有更多关于Vue和动态导入的信息。
一个小问题
注意我们访问了这个道具。是动态导入语句之外的公司。
这是必须的，因为否则Vue无法执行其反应魔法并在道具更改时更新计算值。试一试，你就会明白我的意思了。
通过访问动态导入之外的道具(通过创建一个简单的name变量)，Vue知道组件实例computed属性“依赖”于此。因此，当我们的道具发生变化时，它将有效地引发重新评估。
提醒一句(8月4日更新)
当使用动态导入时，Webpack将(在构建时)为每个匹配导入函数中的表达式的文件创建一个块文件。
上面的示例有点做作，但假设my /components文件夹包含800个组件。然后Webpack会创建800个块。
因为这不是我们想要的(呵呵)，所以确保您编写更严格的表达式和/或遵循文件夹约定。例如，我倾向于将要分割的组件分组到一个名为/components/chunks或/components/bundle的文件夹中，这样我就知道哪些组件是Webpack分割的。
除此之外，我们还得到了一个惯用的、简洁的模式。它有一个奇妙的副作用，使它真正发光:
我们的“条件”组件现在被分割了!
如果你像这样运行npm构建一个组件，你会注意到Webpack会为UserInfo创建一个特定的bundle文件。另外一个是关于companyinfo。vue的。Webpack默认情况下会这样做。Webpack是纯爱❤。
这很好，因为用户在应用程序请求这些包之前不会加载它们，从而减少了初始包大小并提高了应用程序的性能。
代码将是涂料。确保你熟悉它，因为如果你还没有使用它，你可以大大提高你的应用程序。就去做吧!
网友评论