小程序端解决分包的uni_modules打包后产物进入主包中的问题

本文是一篇技术指南,旨在解决uni-app项目的小程序端在使用分包和uni_modules时,编译后组件资源被错误打入主包的问题。文中详细说明了在manifest.json中开启分包优化配置,以及通过合理放置uni_modules目录、并在pages.json中配置easycom自定义规则,来区分主包与分包组件引用的具体方法,最终实现减小主包体积的优化目标。

配置

分包优化

需要在 mainfest.json 指定小程序节点下添加如下配置,例如:

{  
  "mp-weixin": {  
         "optimization": {  
            "subPackages": true  
          },  
        "usingComponents": true  
  }  
}

主包分包的 uni_modules

首先,主包的 uni_moudles 要放在主包的根目录下,分包的 uni_moudles 要放在分包的根目录下,参考附件的第一个图片。

然后,在 pages.json 中配置组件 easycom 引入规则,这一步是为了避免同一个组件库被主包分包都使用,出现识别错误的问题,例如,我在 uniappx 项目中使用了 rice-ui 组件库,可以这样配置

{  
  "easycom": {  
        "autoscan": true,  
        "custom": {  
            "^rice-(.*)": "uni_modules/rice-ui/components/rice-$1/rice-$1.uvue",  
            "^sub-rice-(.*)": "sub/uni_modules/rice-ui/components/rice-$1/rice-$1.uvue"  
        }  
    }  
}

这样,分包用组件就写 sub-rice-avatar,主包就是 rice-button

效果参考附件的第二张图片

示例项目

参考附件三

小程序端解决分包的uni_modules打包后产物进入主包中的问题
小程序端解决分包的uni_modules打包后产物进入主包中的问题

相关文件下载地址
©下载资源版权归作者所有;本站所有资源均来源于网络,仅供学习使用,请支持正版!

原创文章,作者:howkunet,如若转载,请注明出处:https://www.intoep.com/program/weixinapp/73251.html

(0)
微信小程序FormData上传解决方案:wx-formdata实现多文件上传
上一篇 2026-04-24 09:21
微信小程序的知识体系梳理
下一篇 2024-08-08 10:17

相关推荐

发表回复

登录后才能评论
扫码了解
扫码了解
反馈建议
分享本页
返回顶部