Vue3 异步组件

携手创作，共同成长！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

异步组件

***提升性能

vueuse ： https://vueuse.org/core/useintersectionobserver/

10.1 使用场景1

	组件按需引入：当用户访问到了组件再去加载该组件

		<template>
			<div ref='target'>
				<C v-if='targetIsVisible'></C>
			</div>
		</template>

		<script setup>
		import { useIntersectionObserver } from '@vueuse/core'

		const C = defineAsyncComponent(() =>
		  import('../components/C.vue')
		)

		const target = ref(null);
		const targetIsVisible = ref(false);

		const { stop } = useIntersectionObserver(
		  target,
		  ([{ isIntersecting }]) => {
		  	if( isIntersecting ) {
		  		targetIsVisible.value = isIntersecting
		  	}
		  },
		)
		</script>

10.2 使用场景2 

	<Suspense>
		<template #default>
			<A></A>
		</template>
		<template #fallback>
			加载中...
		</template>
	</Suspense>

	<script setup>
	const A = defineAsyncComponent(() =>
	  import('../components/A.vue')
	)
	</script>


10.3 打包分包处理

	npm run build打包完成后，异步组件有单独的js文件，是从主体js分包出来的

	A.c7d21c1a.js
	C.91709cb2.js