使用uniapp在打包微信小程序时主包和vendor.js过大(uniCloud的插件分包)

文章讲述了在微信小程序开发中遇到主包体积过大,尤其是vendor.js文件过大的问题,以及如何通过调整manifest.json的分包配置,特别是针对uni-app中引入的大量uni插件进行合理分包,以减小主包大小。同时,文章提到了在分包后需手动引入组件并避免全局注册,以防止vendor.js体积再次增大。通过这些方法,可以有效优化小程序的加载性能。
摘要由CSDN通过智能技术生成

1.问题描述

正常的的微信小程序在编译后,主包应保持在2MB左右(限制最大2MB),其余的文件通过分包来进行加载

 但是有的情况下,微信小程序的主包能达到3MB,vendor.js会达到1.5MB

 2.问题解决

当你发现的你的微信vendor.js只有1个文件夹,且这个文件非常大时,首先需要检查manifest.json

在这个文件夹下的源码视图中,在这个文件下的mp-weixin节点有个optimization

 optimization下的subPackages节点时用来控制微信分包的,需要将此节点设为true

"optimization" : {
    "subPackages" : true
}

一般的微信小程序设置这个节点就能够解决

但是如果你的微信小程序在uni_modles下引入了非常多的uni插件,比如说:uni-id-pages,uni-im,uSearch,uni-pay等uni全家桶

这些页面默认都会在主包里,因为uni_modules是主包,所以该目录下的uni-id-pages和uni-im页面也会打包到主包里(主包里面的vendor.js会打包所有主包里面的页面与插件的js文件),所以导致了主包里面的vendor.js在分包打包后依旧过大

这时就需要我们把你项目中引用的插件也进行分包(uni-id-pages和uni-im引入时在uni_modules下)

在pagesjson中添加分包信息,将在主包中注册的插件的页面都移动到此分包中

 通过查找替换功能,将uni-id-pages等插件的路径由“uni_modules/uni-id-pages”替换为“subpackageuni/uni-id-pages”

不建议直接把uni_modules直接分包,因为其中可能包含其它组件,这些组件最好注册在主包中注册,因为子包不能引用子包的插件,所以插件如果在子包中,就只有子包中才能引用

 同理,将uni-id-pages等插件分包后,这些插件就不适用与uni-app的组件规则,就需要我们手动去引入

在uni-id-pages下有如下的组件,这些组件在经过分包之后,只能在子包内才能访问,而通过uniapp的组件引入是通过easycom组件规范来引入的,详细见如下链接:

组件使用的入门教程 | uni-app官网

 因此这些组件需要通过vue语法引入到页面(必须要在子包内引入,因为你如果把这些组件都通过注册全局组件来引入,那么到头来还是会增加vendor.js的大小,因为vendor.js会引入全局组件)

通过vue语法,将所有的组件导入到所有的页面(为了方便)

 每个页面都把这些组件复制一遍即可

 最后再进行分包你就会发现主包的vendor.js明显小了

 而由于把uni-id-pages和uni-im进行了分包,分包中的vendor.js明显变大(这样就把以前位于主包的vendor.js打包到了分包中)

 

 

 

微信小程序打包common/vendor.js是指将小程序中的通用代码、库文件、资源文件等集中打包成一个文件。 在微信小程序开发中,我们经常会使用到一些通用的代码或者库文件,例如一些第三方库、封装的工具类等。这些代码在不同的页面或组件之间都会被使用到,如果每个页面都单独引入这些代码,就会造成代码的冗余和重复加载,影响小程序的性能和加载速度。 为了解决这个问题,微信小程序提供了打包机制。通过将这些通用的代码集中打包成一个文件,可以减少重复的加载,并且在需要的地方引入这个打包文件即可。 common/vendor.js打包过程如下: 1. 在小程序项目根目录下找到app.json文件,找到其中的"pages"字段,将所有的页面路径都列出来。 2. 根据页面路径和页面文件的import语句,分析出所有被引入到页面中的通用代码和库文件。 3. 将这些通用代码和库文件统一打包成一个vendor.js文件。这个文件中包含了各个通用代码和库文件的源代码。 4. 在页面的json配置文件中,通过"usingComponents"字段或"dependencies"字段引入vendor.js文件。这样,每个页面在加载时都会自动引入这个打包好的通用代码文件。 通过打包common/vendor.js,可以减少小程序的文件数量和大小,提高小程序的性能和加载速度。同时,也方便了开发者对通用代码和库文件的维护和更新,统一管理更加方便。 总之,微信小程序打包common/vendor.js是为了减少代码冗余和提高性能,通过将通用代码和库文件集中打包成一个文件,优化小程序的加载和运行效率。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值