解决使用uniapp开发微信小程序时主包太大和vendor.js过大无法打包的问题

在uniapp开发小程序这一块,相信很多开发者都遇到过代码体积太大无法打包的问题,这时候就要优化小程序包大小。下面分享一下我的解决思路。希望能给大家一些帮助吧。

方法一:线上图片
小程序体积大是因为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、点击发行。然后控制台会开始编译,等编译好了会自动打开微信开发者工具


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

————————————————
版权声明:本文为CSDN博主「赢乐」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/shanghai597/article/details/131593381

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值