标签：异步 Vue 06 AsyncCategory defineAsyncComponent js retry 组件

异步组件 | 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,AsyncCategory,defineAsyncComponent,js,retry,组件
来源： https://www.cnblogs.com/hexrui/p/15709332.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。