小程序:uniapp解决 vendor.js 体积过大的问题

一、环境介绍

uniapp + HBuilderX

二、问题描述

真机调试,提示包提交过大,不能生成二维码,后续上传代码更是不可能了

三、代码包体积优化

代码包体积优化 | 微信开放文档

3.1、图片等静态资源放到服务器上,小程序引用服务器文件地址(图片较多的话会节约大量的体积)。
项目仅保留了底部导航的icon。

3.2、根据业务类型进行分包处理(分包后单一包的体积迅速减少):

使用分包 | 微信开放文档

"optimization":{
    "subPackages":true
}

3.3、运行时压缩代码 (体积减少很多,测试项目减少400多kb)

 

压缩前:

 这几步骤下来代码体积到了:

小于2M,代码已经可以生成二维码预览、调试、上传了 

3.4、勾选这几项:

3.5、勾选后这里就通过了:

manifest.json配置按需注入:

"lazyCodeLoading": "requiredComponents"

配置后这里通过了 

 

3.6、重要的一点,及时清理无用的代码 

3.7、打包完代码,上传时,提示代码体积超过了限制,这个时候关闭了微信开发工具,重新打开,然后上传,上传成功了,,后来有多次类似情况。

四、欢迎交流指正,关注我,一起学习 

五、参考链接

解决 vendor.js 过大的问题_吕小仙的霸霸的博客-CSDN博客_vendor.js过大

Vue 打包优化方案(解决 vendor.js 过大的问题)_黄河爱浪的博客-CSDN博客_vendor.js

Vue 打包优化方案(解决 vendor.js 过大的问题)_黄河爱浪的博客-CSDN博客_vendor.js

https://www.jb51.net/article/164542.htm

uni-app项目vendor.js 过大的处理方式 - 简书

uniapp小程序如何分包?完整详细步骤教给你_沐卿゚的博客-CSDN博客_uniapp分包

解决uni-app编译后vendor.js文件过大

如何解决uni-app编译后 vendor.js 文件过大 / 张生荣

小程序性能优化指南 | 微信开放社区

uniapp 小程序启用组件按需注入 “lazyCodeLoading“: “requiredComponents“_一斤代码的博客-CSDN博客

按需注入和用时注入 | 微信开放文档

  • 14
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
微信小程序打包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是为了减少代码冗余和提高性能,通过将通用代码和库文件集中打包成一个文件,优化小程序的加载和运行效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值