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

ops/2024/11/24 0:02:53/

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

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

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

	//主包的页面"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组件进行加载。

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

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


//文件目录：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组件。就需要配置一下。

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