UniApp 异步加载机制
UniApp 的异步加载主要分为 组件异步加载 和 JS 异步加载。
1. 组件异步加载
1.1 场景描述
在常规的分包场景下,假设我们创建了三个分包。其中 SPB 分包内的某个组件,需要被 主包 以及 SPA 分包 共同使用。
1.2 问题现象
直接引用时,控制台会报错,且页面无法渲染出目标组件(通常只会渲染出 fallback 的 slot 内容),这是因为运行时无法直接识别位于其他分包中的组件。
1.3 解决方案
为了解决这个问题,我们需要添加一行关键配置代码,以启用组件的异步加载功能。
1.4 验证结果
检查分包详情,确认该组件依然被打包在 SPB 分包中,未被重复打包到主包。至此,组件异步加载配置成功。
2. JS 异步加载
2.1 概述
Vue3 的组件异步加载机制与 Vue2 基本一致,在此不再赘述。 关于 Vue2 版本的 JS 异步加载,由于 Webpack 依赖扫描机制,会一直重置require。而我这边主要是 Vue3 开发,本文将重点介绍 Vue3 环境下的 JS 异步加载方案。
2.2 实现原理
在 Vue3 (Vite) 环境下,实现跨分包 JS 异步加载相对简单。Vite 默认不会处理 require 语法,这使得 require 方法可以被完整保留到运行时。因此,我们无需进行额外的构建配置,只需在代码中判断当前运行环境是否为小程序即可。
2.3 业务实践
在实际业务开发中,我们可以采用以下两种方式进行处理: