uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题

简介: uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题

在uniapp开发小程序这一块,相信很多开发者都遇到过代码体积太大无法打包的问题,还有vendor.js过大无法打包。这时候就要优化小程序包大小。下面分享一下我在实际项目中使用的方法,并解决了相应的问题,这里是我的解决思路。小伙伴们也可以根据自身情况,参考一下。希望能给大家一些帮助吧。

方法一:线上图片

小程序体积大是因为static目录的图片资源过大的话,我们可以将static的图片上传图片服务器上去,小程序使用链接的形式来下载使用图片。

静态图片使用线上地址,不要放到项目中,除了navBar的icon,因为那个只能使用本地资源,相对来说这个不大。

1、上传图片资源到图片服务器上去

将切好的图片上传到图片服务器上面,

比如 https://www.xxxxxxxx.com.cn/wx/static/images/1.png

2、处理JS和vue中的图片引用
2.1、定义JS全局变量

在main.js页面定义js全局变量

Vue.prototype.staticDir = 'https://www.xxxxxxxx.com.cn/wx/static/'; 
Vue.prototype.getStaticFilePath = function (url) {
    return Vue.prototype.staticDir + url;  
}
2.2、替换vue中的图片地址

以前我们引用的图片地址是下面这样的:

<view class="demo">
    <image src="/static/images/1.png"></image>
</view>

现在我们修改src成这样即可:

<view class="demo">
    <image :src="getStaticFilePath('/images/1.png')"></image>
</view>

3、处理css中的图片引用

uniapp根目录下有一个特殊的文件uni.scss,在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss,使得每个scss文件都被注入这个uni.scss,达到全局可用的效果。我们将scss的static目录变量放到这里,即可全局使用了。

3.1、定义scss全局变量

在uni.scss的最后添加:

// 背景图片路径
$custom-bg-img-url:'https://www.xxxxxxxx.com.cn/wx/static/';
3.2、css文件改名成scss文件

将原来的css文件改名成scss文件,并像下面这样修改vue中的引用。加上了lang=“scss”

<style scoped lang="scss">

</style>
3.3、替换css中的图片地址

以前css中的背景图地址是下面这样的:

.bgimg {
    width: 40rpx;
    height: 40rpx;
    background-image: url(/static/imags/1.png);
    background-size: cover;
}

现在我们修改url成这样即可:

.bgimg {
    width: 40rpx;
    height: 40rpx;
    background-image: url($custom-bg-img-url+'/images/1.png');
    background-size: cover;
}

方法二:分包加载

除了TabBa的页面,其他的页面进行分包处理,保证主包的大小,因为在编译后那些静态js和组件也会放入主包中,分包方式官网有详细解释。

目前小程序分包大小有以下限制:

整个小程序所有分包大小不超过 20M

单个分包/主包大小不能超过 2M

对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。

具体使用方法请参考:

官网介绍

使用分包

独立分包

分包预下载

分包异步化

方法三:依赖分离

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

1、检查manifest.json,在这个文件下的源码视图中,在mp-weixin节点有个optimization,

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

"optimization" : {
    "subpackages" : true
}

2、配置好重行运行,会发现分包的js文件将不会再打包到主包的vendor.js中了

方法四:代码压缩

1、在HBuilder上面点击运行——>运行到小程序模拟器——>运行时是否压缩代码

2、在HBuilder上面点击发行——>小程序——>发行——>小程序-微信(仅适用于uni-app)(W)

3、输入小程序名称和appid点击发行即可。然后控制台会开始编译,等编译好了会自动打开微信开发者工具。

如果手动发行,则点击发行按钮后,会在项目的目录 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。在微信小程序开发者工具中,导入生成的微信小程序项目,测试项目代码运行正常后,点击“上传”按钮,之后按照 “提交审核” => “发布” 小程序标准流程,逐步操作即可。


如果在发行界面勾选了“自动上传微信平台”,则无需再打开微信工具手动操作,将直接上传到微信服务器提交审核。

4、现在缩小了很多,以前3.2M,现在只有1.8M,现在不管是用来上传代码还是调试都完全没有问题了。

5、“运行” 和 “发行” 的区别:

运行:模式有 SourceMap 可以方便的进行断点调试;编译出的代码存放于根目录下的 /dist/dev/目录。

发行:模式会将代码进行压缩,体积更小更适合发布为正式版应用;编译出的代码存放于根目录下的 /dist/build/ 目录。

目录
打赏
0
1
1
0
12
分享
相关文章
陪玩APP推送配置:陪玩系统手机锁屏收不到推送?可能是这些原因!解决方案来了!
陪玩系统手机锁屏收不到推送可能由推送服务配置不当、手机系统设置限制、网络不稳定或应用权限不足等原因导致。解决方案包括:确保推送服务正确配置,调整手机后台管理设置,保持网络连接稳定,授予应用必要权限。若问题持续,建议联系客服获取帮助。
Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中,作者遇到了打包构建时的一系列报错,报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整,作者最终删除了lodash-es库,并将radash的部分源码复制到本地,解决了打包报错的问题。文章最后提供了项目的线上预览地址,并欢迎读者留言讨论更好的解决方案。
41 10
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
QQ 小程序已发布,但无法被搜索的解决方案
我的 QQ 小程序在 2024 年 8 月就已经审核通过,上架后却一直无法被搜索到。打开后,再在 QQ 上下拉查看 “最近使用”,发现他出现一下又马上消失。
60 2
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
567 3
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
137 2
微信H5支付--微信JS-SDK支付--点金计划
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程,涵盖了H5支付在移动端浏览器外唤起微信支付的细节,以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题,提供了解决方案和代码示例。最后,文章深入解析了微信支付点金计划,包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑,为开发者提供了完整的开发参考。
254 0
微信H5支付--微信JS-SDK支付--点金计划
|
3月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
34 0
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
49 1
JavaScript中的原型 保姆级文章一文搞懂

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    45
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    28
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等