动态组件、异步组件

#tag

动态组件、异步组件的笔记

动态组件

动态显示不同的组件

<component is="xxx"></component>

xxx为组件名，组件名来自

• 全局注册组件的 如：vue.component('xxx', {....})
• 局部注册的 如： components: [‘xxx’]

prop

有些组件带有prop的也是可以通过<component is='xxx' attr='' />这样子传递过去

动态组件

异步组件

异步组件，就是需要它的时候，再去加载它。
先介绍下webpack的分包，再引入到vuecli中去使用。

webpack的分包

main.js

import xxxmodule from './xxxmodule'

这样使用build打包命令后，会将这个模块也打到app.js中，若我们的模块有很多的话，会导致这个js的文件大小特别的大，特别是CSR模式的程序，会导致第一次的首屏加载时间超级长。那这时候就需要将这个模块打包后生成另外的js抽离出去。

import('./xxxmodule', (res) => {
	// res是promise实例
})

这样打包后就抽离出chuck.js，减少app.js的体积

vuecli中的异步组件

因为vuecli默认是webpack这个打包器，所以使用的也是上面这种方式去抽离.vuesfc文件

使用

import { defineAsyncComponent } from 'vue'
defineAsyncCommponent('./xxx.vue', (res) => {
	//do something
})

这个函数可以传递接受一个返回 Promise 的工厂函数，也可以接受一个对象
官方api文档