打破分包不能引用的壁垒 之 分包异步化
您能在这看到啥
- 分包异步化
- 记录问题
分包异步化
-
因
在分包的概念中,不同的分包对应的不同的下载单元.除了非独立分包可以依赖主包外.其他分包之间是
不可以相互引用私有资源
的. -
果
正是因为上面的因.
分包异步化
就此诞生了.-
存在的意义
分包异步化
特性将允许通过一些配置和新的接口,使部分跨分包
的内容可以等待真正所需分包资源下载完成后异步使用.从而来打破分包不能引用的壁垒哦
.划重点: 在上面的描述中,有一个很关键的词.那就是
部分跨分包
.为啥说部分跨分包
是重点呢,主要原因是分包预下载功能.因为每个分包的大小都有2M的限制.下面我们画个图来简单说一下.如上所示.
分包A
中的pageA
界面引入了分包B
中的组件B
.按正常流程上来说.主包引入了分包A
.分包A
是不能引入分包B
的.但是有了分包异步化功能后,我们就可以使用异步的方式只下载分包B
中的组件B
.这里,我理解的是,如果主包没有下载分包B
的情况下.通过分包异步化方式,分包A
和组件B
应该属于一个分包体系,所以分包A
+组件B
的大小不能大于2M.即使你使用分包异步化
的方式.但你的分包
大小超过2M.那么在打包的时候,限额工具也会提醒你超包. -
怎么使用
通过上面的学习,大致已经理解了分布异步化的概念.下面我们就看一下怎么使用吧.
实践才是王道
-
跨分包引入自定义组件
-
创建
testmodule
分包.并创建自定义组件,如下所示 -
在
mall
分包引入test
组件{ "usingComponents": { "testbtn": "../../../testmodule/components/testcomponent" }, # 通过这个字段,我们可以给testbtn组件配置占位组件view "componentPlaceholder": { "testbtn":"view" } }
在上面的配置中,
testbtn
组件是跨分包引用组件
.在渲染的时候我们用内置组件view
代替testbtn
组件.等对应的分包下载完成的时候,testbtn
组件就正常显示了.下面我们一起来看一下,加载后界面效果吧
-
-
跨分包引入js文件
分包引用其他分包的js文件的时候,为了不影响主线程,官方推荐使用异步获取引用结果.
下面我们简单测试一下.比如要引用test分包中
utils.js
中的loaddata
方法.我们先添加一下loaddata
方法.如下所示然后就是怎么跨分包使用js方法了.官方推荐有两种方式
-
使用回调函数风格的调用
require('../../../testmodule/utils/utils.js', utils => { console.log(utils.loaddata("调用js")); /// 控制台输出为调用js }, ({mod, errMsg}) => { console.error(`path: ${mod}, ${errMsg}`) });
-
使用 Promise 风格的调用
require.async('../../../testmodule/utils/utils.js').then(pkg => { console.log(pkg.loaddata("调用js")); /// 控制台输出为调用js }).catch(({mod, errMsg}) => { console.error(`path: ${mod}, ${errMsg}`) });
-
-
-
记录问题
-
今天在测试分包异步化的时候,发现了一个小问题.如下所示:
以下文件已被配置忽略打包上传,模拟器无法获取问题处理
-
复现步骤
- 在两个分包模块下分别创建了两个组件
A
和B
. A
组件被其他界面引用
了.B
组件没有被任何界面引用
.然后在运行时,就会提示这个问题.
- 在两个分包模块下分别创建了两个组件
-
分析现象
从错误提示来说,我理解的就很简单.我们创建了的文件没有被任何
模块
或文件
引用.系统会给你友好的提示.让你确认自己有没有创建多余的文件,毕竟在小程序里.内存还是寸土寸金的.这样也很好.那怎么才能关闭这种功能.其主要原因还是开发不规范导致. -
解决方案
-
排查代码,删除无用代码,或者保存到缓存区.(这才是解决问题的办法)
-
置工程文件
ignoreDevUnusedFiles
在工程配置文件
project.config.json
文件中setting
字段里.添加"ignoreDevUnusedFiles": false
,即可解决问题.这个字读的含义就是关闭过滤掉模拟测试环境无依赖文件
功能. -
网上也有说要配置
ignoreUploadUnusedFiles:false.我觉的最好还是不要关闭这种功能.-
ignoreUploadUnusedFiles
含义如下所示从字面上我们就知道.这个是配置
传包
配置项.打开它,它会在你执行上传
的时候,会过滤掉,全局无依赖的文件
- 可以减少包体积
- 也可以提醒你,那些是没有引用的,方便排查功能是否完善.
-
-
-