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

本文主要是介绍解决使用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、输入小程序名称和appid点击发行即可。然后控制台会开始编译,等编译好了会自动打开微信开发者工具。

在这里插入图片描述

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

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

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

在这里插入图片描述

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

运行:模式有 SourceMap 可以方便的进行断点调试;编译出的代码存放于根目录下的 /dist/dev/目录。
发行:模式会将代码进行压缩,体积更小更适合发布为正式版应用;编译出的代码存放于根目录下的 /dist/build/ 目录。

这篇关于解决使用uniapp开发微信小程序时主包太大和vendor.js过大无法打包的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/560880

相关文章

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(

Python使用自带的base64库进行base64编码和解码

《Python使用自带的base64库进行base64编码和解码》在Python中,处理数据的编码和解码是数据传输和存储中非常普遍的需求,其中,Base64是一种常用的编码方案,本文我将详细介绍如何使... 目录引言使用python的base64库进行编码和解码编码函数解码函数Base64编码的应用场景注意

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis