提示:异步组件的使用
文章目录
提示:以下是本篇文章正文内容,下面案例可供参考
一、webpack默认打包过程?
- 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app,js文件中 ) ;
- 这个时候随着项目的不断庞大,app.js文件的内容过大,会造成首屏的渲染速度变慢
基于webpack打包 npm run build 生成 dist 文件 有有个js文件 有app.哈希值.js chunk.windors.哈希值.js :第三方
二、异步组件的使用过程
1.在项目中src文件加下 创建文件夹(异步组件的使用) —> App.vue 和Home.vue 和AsyncCategory.vue
app.vue
代码如下(示例):
<templete>
<div>
app组件
<home></home>
<async-category />
<div>
</templete>
如果我们的项目过大了,对于某些组件我们希望通过异步的方式来进行加载(目的是可以对其进行分包处理么Vue中给我们提供了一个函数:defineAsyncComponent。 defineAsyncComponent接受两种类型的参数: 类型一工厂函数,该工厂函数需要返回一个Promise对象口 类型二:接受一个对象类型,对异步函数进行配置;
<script>
//vue3写法 webpack打包会将AsyncCategory.vue打包到分包里面 需要时才会显示 优化首屏渲染进度
import { defineAsyncComponent } from ' vue' ;
const AsyncCategory = defineAsyncComponent (()=> import ('./AsyncCategory.vue'))
//或者
const AsyncCategory = defineAsyncComponent ({
loader:() =>import ('./AsyncCategory.vue'),
loadingComponent:Loading, //会一闪而过 暂备组件 AsyncCategory 未加载会先显示 Loading 组件
//errorComponent, 未加载成功
delay:2000, //延迟 在显示loadingComponent 组件之前 等待多长时间
onError :function(err,retry,attempts) {
// err 错误信息
//retry 函数 调用retry重新加载
//attempts 记录尝试次数
}
})
import Loading from "./Loading.vue"
import Home from "./home.vue"
import AsyncCategory from './AsyncCategory.vue' //这里也会打包到app.js中 不优化首屏渲染进度
export default {
components : {
Home,
AsyncCategory
}
}
<script>
2.在main.js中使用 import 引入 (异步组件的使用)这个文件下的App.vue
代码如下(示例):
import App from './异步组件的使用/App.vue'
import {sum } from './异步组件的使用/utils/math' //会打包app.js中
//可以单独打包
//通过import函数 导入的模块
//后续webpack对其进行打包的时候就会进行分包的操作
import('./异步组件的使用/utils/math').then(res=>{
console.log(res.sum(20,20))
})
console.log(sum(20,20))
3.在项目中src文件加下 创建文件夹(异步组件的使用) —> 创建文件夹 (utils) --> muth.js
export function sum (num1,num2) {
return num1+num2
}
想对AsyncCategory.vue异步组件进行分包
<templete>
<div>
AsyncCategory组件
<h2> {{message}}</h2>
<div>
</templete>
<script>
export default {
data(){
return {
message :'hello Category'
}
}
}
<script>
suspense插槽
app.vue
代码如下(示例):
<templete>
<div>
app组件
<home></home>
<suspense>
<template #default>
<async-category />
</template>
<template #fallback>
<loading />
</template>
</suspense>
<div>
</templete>