使用uniapp开发微信小程序使用uni_modules导致主包文件过大,无法发布的解决方法

在使用uniapp开发微信小程序时候,过多的引入uni_modules的组件库,会导致主包文件过大,导致无法上传微信小程序,主包要求大小不超过1.5MB.分包大小每个不能超过2M。

解决方法:分包。

1.对每个除了主页面navbar的页面进行分包操作。

在page.json文件进行分包配置。分包代码例子:

javascript 复制代码
	//主包的页面
    "pages": [{
            "path": "packages-main/tab-bar-pages/home/index",
            "style": {
                "navigationBarTitleText": "主页",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom",
            }
        },
    ],
    //这样我们就可以把login页面和register页面进行分包处理。
    "subPackages": [
        {
            "root": "packages-sub/login/",
            "name": "login",
            "pages": [{
                    "path": "login",//指代login.vue文件
                }
            ]
        },
                {
            "root": "packages-sub/register/",
            "name": "register",
            "pages": [{
                    "path": "register",
                }
            ]
        },
	]

然后就可以在微信小程序的代码依赖分析中找到分包的效果。

2.对uni_modules中引入的模块进行代码转移和分包处理。

如果我们把uni_modules代码直接转移到分包文件夹,打包完成后,还是会把代码打包入主包文件中,需要我们手动把组件分包引入。但是需要注意的是,对uni_modeluse会导致组件互相引入的时候出现循环报错,需要我们一个一个解决。另外在引入的页面也会出现无法找到组件的问题,需要我们对page.json文件增加引入入口。

1.uniapp使用easycom属性在page.json文件内把移动到分包内的ui组件进行加载。

javascript 复制代码
    "easycom": {
        "autoscan": true,
        "custom": {
            "^uni-(.*)": "@/packages-sub/components/uni-$1/components/uni-$1/uni-$1.vue",
    },
    "pages":.......

2.对uni_modules文件进行分包处理,尽量挪动组件互相引用少的。

javascript 复制代码
//文件目录:packages-sub\components\uni-popup\components\uni-popup\uni-popup.vue
 "subPackages": [
        {
            "root": "packages-sub/components/uni-popup/",
            "name": "uni-popup",
            "pages": [{
                    "path": "components/uni-popup/uni-popup"
                }
            ]
        },
	]

3.对使用到的页面进行页面组件引入配置。

同样打开page.json文件,如在登陆页面使用到了uni-popup组件。就需要配置一下。

javascript 复制代码
        {
            "root": "packages-sub/login/",
            "name": "login",
            "pages": [{
                    "path": "login",
                    "style": {
                        "navigationBarTitleText": "登录",
                        "enablePullDownRefresh": false,
                        "componentPlaceholder":{
                            "uni-popup":"view",  //view在这里起到一个占位符的作用,这样可以解决找不到引入文件的问题。       
                        }
                    }
                }
            ]
        },

以上方法可以解决uni_modules的分包问题。当然我们在进行微信小程序开发时,在开发之初就要处理好代码的分包问题,避免在发版时无法发布代码产生问题。另外在进行组件开发时最好使用原生微信小程序的组件,或者自己开发。插件用时爽,分包的时候问题有点难。

相关推荐
WenGyyyL4 分钟前
微信小程序开发——第四章:小程序的组件与模块化开发
微信小程序·小程序·notepad++
前端与小赵4 小时前
uni-app开发安卓app时控制屏幕常亮不息屏
android·gitee·uni-app
文人sec5 小时前
微信小程序minium自动化测试SOP
微信小程序·小程序
克里斯蒂亚诺更新5 小时前
微信小程序 点击地图后弹出一个模态框
微信小程序·小程序·notepad++
云起SAAS5 小时前
患者随访管理抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·患者随访管理
2501_916008895 小时前
HTTPS 请求抓包,从原理到落地排查的工程化指南(Charles / tcpdump / Wireshark / Sniffmaster)
ios·小程序·https·uni-app·wireshark·iphone·tcpdump
金梦人生6 小时前
UniApp + Vue3 + TS 工程化实战笔记
前端·微信小程序
xiaohe06016 小时前
🥳 Uni ECharts 2.1 发布:正式支持鸿蒙,零成本迁移、全平台兼容、跨端开发零负担!
vue.js·uni-app·echarts
2501_9159090618 小时前
WebView 调试工具全解析,解决“看不见的移动端问题”
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063220 小时前
App 怎么上架 iOS?从准备资料到开心上架(Appuploader)免 Mac 上传的完整实战流程指南
android·macos·ios·小程序·uni-app·iphone·webview