UniApp 异步加载机制

45 阅读1分钟

UniApp 异步加载机制

UniApp 的异步加载主要分为 组件异步加载JS 异步加载

1. 组件异步加载

1.1 场景描述

在常规的分包场景下,假设我们创建了三个分包。其中 SPB 分包内的某个组件,需要被 主包 以及 SPA 分包 共同使用。

image-5.png

image.png

image-1.png

image-2.png

image-3.png

image-4.png

1.2 问题现象

直接引用时,控制台会报错,且页面无法渲染出目标组件(通常只会渲染出 fallback 的 slot 内容),这是因为运行时无法直接识别位于其他分包中的组件。

image-6.png

1.3 解决方案

为了解决这个问题,我们需要添加一行关键配置代码,以启用组件的异步加载功能。

image-9.png

image-7.png

image-8.png

1.4 验证结果

检查分包详情,确认该组件依然被打包在 SPB 分包中,未被重复打包到主包。至此,组件异步加载配置成功。

image-11.png

image-10.png

2. JS 异步加载

2.1 概述

Vue3 的组件异步加载机制与 Vue2 基本一致,在此不再赘述。 关于 Vue2 版本的 JS 异步加载,由于 Webpack 依赖扫描机制,会一直重置require。而我这边主要是 Vue3 开发,本文将重点介绍 Vue3 环境下的 JS 异步加载方案。

2.2 实现原理

在 Vue3 (Vite) 环境下,实现跨分包 JS 异步加载相对简单。Vite 默认不会处理 require 语法,这使得 require 方法可以被完整保留到运行时。因此,我们无需进行额外的构建配置,只需在代码中判断当前运行环境是否为小程序即可。

image-19.png

image-17.png

image-18.png

2.3 业务实践

在实际业务开发中,我们可以采用以下两种方式进行处理:

image-20.png

image-21.png