微信小程序包大小超过2M的解决方法

您所在的位置:网站首页 小程序代码包大小 微信小程序包大小超过2M的解决方法

微信小程序包大小超过2M的解决方法

2024-07-12 03:12| 来源: 网络整理| 查看: 265

小程序的包被限制在2M以下, 超出的时候点击预览, 发现报错: Error: 代码包大小为 3701 kb,上限为 2048 kb,请删除文件后重试

解决方法:

优化代码, 删除掉不用的代码

图片压缩或上传服务器

一般图片所占空间较大,尽量不要放在小程序本地文件夹中,如果图片不多我们也可以对图片进行压缩,我经常使用的图片压缩平台:点击这里;

也可以将图片上传到服务器上,进行外链引用, 我们使用的是阿里云oss存储, 另外也可以通过图片托管平台对图片进行托管, 我找到的的图片托管平台:点击此处;

另外, 通过cli命令创建的uni app项目,可将图片或字体图标放入assets文件夹下,通过require引入, 也可减少主包大小

分包加载

官方推出小程序分包加载这一功能,对于万千小程序开发者来说这无疑是天大的喜讯,关于如何分包,微信官方文档已经解释的十分清楚,在进行分包之前建议认真阅读官方文档。

对于用户来说,小程序的加载流程变成了:

1,首次启动,加载小程序主包,显示主包内的页面 2,如果用户进入了某个分包的页面,再加载这个对应分包,显示分包的页面

采用分包加载,对于开发者而言,能使小程序有更大的代码体积,承载更多的功能和服务,对于用户而言,可以更快的打开小程序,同时再不影响启动速度的前提下使用更多功能。

分包的划分:

在配置前首先需要开发者规划下各个分包需要容纳的内容,建议开发者按照功能划分的原则,将同一个功能下的页面和逻辑放置于同一个目录下,对于一些跨功能之间的公共逻辑,将其放置于主包下,这样可以确保在分包引用这部分功能时,这部分的逻辑一定存在。

在分包划分时,应该注意以下事项:

1,避免分包与分包之间引用上的耦合。因为分包的加载是用户操作触发的,并不能确保其分包加载时, 另一个分包就一定存在,这个时候可能导致js逻辑异常,某些资源找不到的错误; 2,一些公共用到的自定义组件,需要放在主包内; 3,使用小程序自带的tab切换时,list中的页面需要放在主包内。

分包的配置:(微信客户端 6.6.0,基础库 1.7.3 及以上版本开始支持。)

当理清了分包的划分后,就可以进行分包的配置了,这一步并不复杂。

假设支持分包的小程序目录结构如下:

├── app.js ├── app.json ├── app.wxss ├── packageA │ └── pages │ ├── cat │ └── dog ├── packageB │ └── pages │ ├── apple │ └── banana ├── pages │ ├── index │ └── logs └── utils

开发者通过在 app.jsonsubPackages字段声明项目分包结构:

{ "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ] }

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

整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M

低版本兼容:

由微信后台编译来处理旧版本客户端的兼容,后台会编译两份代码包,一份是分包后代码,另外一份是整包的兼容代码。 新客户端用分包,老客户端还是用的整包,完整包会把各个 subpackage 里面的路径放到 pages 中。

示例项目:

下载 小程序示例(分包加载版)源码

接下来简单介绍一下在不同框架中的使用: 1、在uni app中:

uni app通过cli初始化的小程序目录结构如下:

├── src ├── main.js ├── App.vue ├── pages.json ├── manifest.json ├── orderPackages │ └── pages │ ├── goodsDetail │ └── myorder ├── pages │ ├── index │ └── user └── utils

需在pages.json中配置 subPackages 字段::

{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/user/user", "style": { "navigationBarTitleText": "个人中心" } } ], "subPackages": [{ "root": "orderPackages", "pages": [{ "path": "pages/goodsDetail/goodsDetail", "style": { "navigationStyle": "custom" } }, { "path": "pages/myorder/myorder", "style": { "navigationBarTitleText": "我的订单" } } ] }] }

在页面中跳转分包页面路径:

uni.navigateTo({ url: `/orderPackages/pages/order/order` }) 2、在taro中:

taro初始化的小程序目录结构如下:

├── src ├── app.js ├── app.scss ├── index.html ├── packageA │ └── pages │ ├── goodsDetail │ └── myorder ├── pages │ ├── index │ └── user └── utils

需在app.js中配置 subPackages 字段:

config = { pages: [ 'pages/index/index', 'pages/user/user' ], subPackages: [ { 'root': 'packageA', 'pages': [ 'pages/goodsDetail/goodsDetail', 'pages/myorder/myorder' ] } ] }

在页面中跳转分包页面路径:

taro.navigateTo({ url: `/orderPackages/pages/order/order` })

以上只罗列了uni app和taro框架分包加载的步骤, 原生小程序分包方法根据官方文档即可快速实现,小程序框架虽多, 大都大同小异,如果后续有使用其他框架进行开发,会进行补充。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3