使用uniapp开发微信小程序使用uni_modules导致主包文件过大,无法发布的解决方法_uniapp开发的微信小程序主包过大问题及解决方案 编译小程序时node-modules被打入
在使用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在这里起到一个占位符的作用,这样可以解决找不到引入文件的问题。 } } } ] },
以上方法可以解决uni_modules的分包问题。当然我们在进行微信小程序开发时,在开发之初就要处理好代码的分包问题,避免在发版时无法发布代码产生问题。另外在进行组件开发时最好使用原生微信小程序的组件,或者自己开发。插件用时爽,分包的时候问题有点难。