uniapp发布微信小程序vendor.js过大

本文介绍了微信小程序的分包加载机制,以及如何通过配置manifest.json开启分包优化来避免子包组件和js文件被打包到主包vendor.js中,从而减少主包大小超过2M的问题。提供了具体的解决方案和代码示例。
摘要由CSDN通过智能技术生成

1、分包加载,小程序限制一个包2M,可以分9个子包,整包共计不能超出20M,这一步很简单,如果看文档感觉枯燥的可以参考uview框架的demo,因为这个demo就使用了小程序的分包机制,demo链接(下载示例项目即可):https://ext.dcloud.net.cn/plugin?id=1593

2、使用分包之后会发现遇到了一个奇怪的问题,子包的组件和js文件会被打包到主包的vendor.js文件中,这就导致了vendor.js过大引起主包超过2M

解决方案:

开启分包优化,打开manifest.json ---> 源码视图 ---> mp-weixin节点下 添加以下代码

"optimization": {
	"subPackages": true
}

这一步就是开启分包优化,开启之后重新发布打包微信小程序,你会发现分包的js文件将不会再打包到主包的vendor.js中了。

要减小微信小程序vendor.js 文件大小,可以考虑以下几个方法: 1. 分析依赖:使用工具分析项目依赖关系,检查是否存在冗余或不必要的依赖。删除不需要的依赖项,只保留必要的库和组件。 2. 使用压缩工具:使用压缩工具(如 UglifyJS、Terser)对代码进行压缩和混淆,减小代码体积。 3. 使用 Tree Shaking:如果你使用的是 ES6 模块化语法,可以使用 Tree Shaking 技术来消除未使用的代码。Tree Shaking 可以通过工具(如 webpack)自动检测和删除未被使用的代码块。 4. 使用按需加载:对于一些大型库或组件,可以考虑按需加载的方式,即只在使用时再动态加载。这样可以避免一次性加载全部代码,减少 vendor.js 的大小。 5. 图片优化:对于图片资源,可以使用压缩工具(如 tinypng)对图片进行压缩,减小文件大小。另外,可以选择适当的图片格式,如使用 WebP 格式可以进一步减小图片大小。 6. 使用 CDN 加速:将一些常用的第三方库或资源上传到 CDN(内容分发网络),通过 CDN 加速加载可以提高访问速度,并减少 vendor.js 文件的大小。 7. 定期更新依赖:及时更新第三方库和组件,以获取最新的版本和修复的 bug。新版本通常会对性能进行优化和代码进行精简。 通过以上方法,可以有效减小微信小程序vendor.js 文件大小,提升小程序的加载速度和性能。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值