Vue_06(异步组件)

本文主要是介绍Vue_06(异步组件)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

异步组件 | Vue.js https://v3.cn.vuejs.org/guide/component-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6

Webpack的代码分包

默认的打包过程：
　　默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组件模块打包到一起（比如一个app.js文件中）；
　　这个时候随着项目的不断庞大，app.js文件的内容过大，会造成首屏的渲染速度变慢；

打包时，代码的分包：
　　对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js；
　　这些chunk.js会在需要时从服务器加载下来，并且运行代码，显示对应的内容；

Vue中实现异步组件的方法：defineAsyncComponent 

defineAsyncComponent接受两种类型的参数：
　　类型一：工厂函数，该工厂函数需要返回一个Promise对象；
　　类型二：接受一个对象类型，对异步函数进行配置；

#1
const AsyncCategory = defineAsyncComponent(() => import("./AsyncCategory.vue"))

#2
const AsyncCategory = defineAsyncComponent({
    loader: () => import("./AsyncCategory.vue"),
    loadingComponent: Loading,
    // errorComponent,
    // 在显示loadingComponent组件之前, 等待多长时间
    delay: 2000,
    /**
     * err: 错误信息,
     * retry: 函数, 调用retry尝试重新加载
     * attempts: 记录尝试的次数
     */
    one rror: function(err, retry, attempts) {

    }
})

这篇关于Vue_06(异步组件)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！