解决使用uni-app开发微信小程序时主包太大和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="https://blog.csdn.net/static/images/1.png"></image>
</view>
现在我们修改src成这样即可:
<view class="demo">
<image :src="https://blog.csdn.net/shanghai597/article/details/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,现在不管是用来上传代码还是调试都完全没有问题了。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgabcie
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24