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

一、环境介绍

uniapp + HBuilderX

二、问题描述

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

小程序:uniapp解决 vendor.js 体积过大的问题_第1张图片

小程序:uniapp解决 vendor.js 体积过大的问题_第2张图片

三、代码包体积优化

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

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

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

使用分包 | 微信开放文档

"optimization":{
    "subPackages":true
}

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

 小程序:uniapp解决 vendor.js 体积过大的问题_第3张图片

压缩前:

小程序:uniapp解决 vendor.js 体积过大的问题_第4张图片

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

小程序:uniapp解决 vendor.js 体积过大的问题_第5张图片

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

3.4、勾选这几项:

小程序:uniapp解决 vendor.js 体积过大的问题_第6张图片

3.5、勾选后这里就通过了:小程序:uniapp解决 vendor.js 体积过大的问题_第7张图片

manifest.json配置按需注入:

"lazyCodeLoading": "requiredComponents"

配置后这里通过了 

 小程序:uniapp解决 vendor.js 体积过大的问题_第8张图片

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博客

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

你可能感兴趣的:(前端,小程序,小程序)