页面上大量 component 绑定 is 后的性能问题

有需求要在区块内以data决定使用的component,如下:

// example.vue
// 目前使用nuxt
<template>
	<component :is="type" />
</template>

<script>
import Type1 from 'Type1.vue'
import Type2 from 'Type2.vue'
import Type3 from 'Type3.vue'
import Type4 from 'Type4.vue'
import Type5 from 'Type5.vue'

export default {
	components: {
		Type1,
		Type2,
		Type3,
		Type4,
		Type5,
	},
	data () {
		return {
			type: 'Type1'
		}
	}
}
</script>

type可能依照各页面数据不同而变化,一个页面上有至少5个类似区块,每个都有5种类型左右

是不是只能这样import所有要使用的component?
对性能上会不会有什幺影响?

用异步组件吧,需要的时候才去加载对应的组件

异步组件是指下方?

<template>
	<component :is="type" />
</template>

<script>
export default {
	...
	components: {
		'type1': () => import('Type1.vue'),
		'type2': () => import('Type2.vue'),
		'type3': () => import('Type3.vue'),
		'type4': () => import('Type4.vue'),
		'type5': () => import('Type5.vue')
	},
	...
}
</script>

如果你是一个 Browserify 用户同时喜欢使用异步组件,很不幸这个工具的作者明确表示异步加载“并不会被 Browserify 支持”,至少官方不会。Browserify 社区已经找到了一些变通方案,这些方案可能会对已存在的复杂应用有帮助。对于其它的场景,我们推荐直接使用 webpack,以拥有内置的头等异步支持。

官方说明 有一段,如果不用 Browserify ,基本上就没差吗?

目前这样写好像没什么错误。

就是这样。
brows是因为不支持异步组件机制,无法处理异步组件