打破分包不能引用的壁垒 之 分包异步化

TT_Close
2,339 阅读4分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第18天，点击查看活动详情

您能在这看到啥

  1. 分包异步化
  2. 记录问题

分包异步化

  • 因

    在分包的概念中,不同的分包对应的不同的下载单元.除了非独立分包可以依赖主包外.其他分包之间是不可以相互引用私有资源的.

  • 果

    正是因为上面的因.分包异步化就此诞生了.

    • 存在的意义

      分包异步化特性将允许通过一些配置和新的接口,使部分跨分包的内容可以等待真正所需分包资源下载完成后异步使用.从而来打破分包不能引用的壁垒哦.

      划重点: 在上面的描述中,有一个很关键的词.那就是部分跨分包.为啥说部分跨分包是重点呢,主要原因是分包预下载功能.因为每个分包的大小都有2M的限制.下面我们画个图来简单说一下.

      截屏2022-12-10 22.41.34.png

      如上所示.分包A中的pageA界面引入了分包B中的组件B.按正常流程上来说.主包引入了分包A.分包A是不能引入分包B的.但是有了分包异步化功能后,我们就可以使用异步的方式只下载分包B中的组件B.这里,我理解的是,如果主包没有下载分包B的情况下.通过分包异步化方式,分包A和组件B应该属于一个分包体系,所以分包A + 组件B的大小不能大于2M.即使你使用分包异步化的方式.但你的分包大小超过2M.那么在打包的时候,限额工具也会提醒你超包.

    • 怎么使用

      通过上面的学习,大致已经理解了分布异步化的概念.下面我们就看一下怎么使用吧.实践才是王道

      1. 跨分包引入自定义组件

        • 创建testmodule分包.并创建自定义组件,如下所示

          截屏2022-12-10 23.12.50.png 截屏2022-12-10 23.12.34.png

        • 在mall分包引入test组件

          {

    "usingComponents": {
        "testbtn": "../../../testmodule/components/testcomponent"
    },
     # 通过这个字段,我们可以给testbtn组件配置占位组件view
    "componentPlaceholder": {
        "testbtn":"view"
    }

}

          在上面的配置中,testbtn组件是跨分包引用组件.在渲染的时候我们用内置组件view代替testbtn组件.等对应的分包下载完成的时候,testbtn组件就正常显示了.下面我们一起来看一下,加载后界面效果吧 MTVideo.GIF

      2. 跨分包引入js文件

        分包引用其他分包的js文件的时候,为了不影响主线程,官方推荐使用异步获取引用结果.

        下面我们简单测试一下.比如要引用test分包中utils.js中的loaddata方法.我们先添加一下loaddata方法.如下所示

        截屏2022-12-10 23.30.07.png 然后就是怎么跨分包使用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}`)
  });

记录问题

  • 今天在测试分包异步化的时候,发现了一个小问题.如下所示:

    以下文件已被配置忽略打包上传，模拟器无法获取问题处理 截屏2022-12-10 21.18.49.png

    • 复现步骤

      1. 在两个分包模块下分别创建了两个组件A和B.
      2. A组件被其他界面引用了.B组件没有被任何界面引用.然后在运行时,就会提示这个问题.

    • 分析现象

      从错误提示来说,我理解的就很简单.我们创建了的文件没有被任何模块或文件引用.系统会给你友好的提示.让你确认自己有没有创建多余的文件,毕竟在小程序里.内存还是寸土寸金的.这样也很好.那怎么才能关闭这种功能.其主要原因还是开发不规范导致.

    • 解决方案

      1. 排查代码,删除无用代码,或者保存到缓存区.(这才是解决问题的办法)

      2. 置工程文件ignoreDevUnusedFiles

        在工程配置文件project.config.json文件中setting字段里.添加"ignoreDevUnusedFiles": false,即可解决问题.这个字读的含义就是关闭过滤掉模拟测试环境无依赖文件功能.

      3. 网上也有说要配置ignoreUploadUnusedFiles:false.我觉的最好还是不要关闭这种功能.

        • ignoreUploadUnusedFiles含义如下所示

          截屏2022-12-10 21.55.10.png

          从字面上我们就知道.这个是配置传包配置项.打开它,它会在你执行上传的时候,会过滤掉,全局无依赖的文件

          1. 可以减少包体积
          2. 也可以提醒你,那些是没有引用的,方便排查功能是否完善.

Demo

系列文章

学习资料

avatar
文章
阅读
粉丝