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

小程序的包被限制在2M以下, 超出的时候点击预览, 发现报错:

Error: 代码包大小为 3701 kb,上限为 2048 kb,请删除文件后重试

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

2. 图片压缩或上传服务器

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

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

另外, 通过cli命令创建的uni app项目,可将图片或字体图标放入assets文件夹下,通过require引入, 也可减少主包大小(此方法是否适用其他小程序框架未知)

3. 分包加载

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

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

在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`
})

在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框架分包加载的步骤, 原生小程序分包方法根据官方文档即可快速实现,小程序框架虽多, 大都大同小异,如果后续有使用其他框架进行开发,会进行补充。

原文地址:https://www.cnblogs.com/puerile/p/11884790.html

时间: 2024-08-22 14:37:57

小程序包大小超过2M的解决方法的相关文章

小程序模板消息报错41028。解决方法

小程序模板消息报错41028 序 最近在写小程序支付回调的时候,想要去触发小程序模板消息,然而过程却很不顺利.一切参数正确的情况下,尽然返回报错41028 41028报错解释 官方:form_id不正确,或者过期 form_id是什么 即wxml文件里面的form表单提交后产生的ID,我这里使用的是支付回调所以这个解释比较的次要. 如果在支付环境里面,form_id就换成你的prepay_id当然如果你已经做过微信支付了那你应该就知道这个东西 模板消息 模板消息数据组装 官方文档:https:/

小程序请求豆瓣API报403解决方法

微信小程序使用wx.request API请求豆瓣公开api的时候,会报一个403(Forbidden)的错误.这是为什么呢?是由于来自小程序的调用过多,豆瓣来自于小程序的调用被禁止.这里收集以下三种方法解决此问题(设置代理): 1.使用 https://douban.uieee.com 2.使用 https://www.zhihu.com/question/265806694/answer/302894881 以上两种方法均是设置代理请求豆瓣API数据. 使用方法:把 https://www.

微信小程序访问豆瓣电影api400错误解决方法

最近在跟着demo学习微信小程序,却卡在了第一步请求豆瓣电影api上,折腾了很久,代码如下: wx.request({ url : "https://api.douban.com/v2/movie/in_theaters", data: {}, header:{ "Content-Type":"application/json" }, success: function(res) { console.log(res.data); var data

容易忽略的小程序比较大小,算法

刚刚从网上看到的 #include<stdio.h> int main() { int i = 0; int max = 0; int n = 5; int input_data = 0; for(i = 0; i < n; i++) { scanf("%d",&input_data); if(input_data > max) { max = input_data; } } printf("max = %d\n",max); ret

UDP丢包和无序 问题的解决方法

最近在做一个项目,在这之前,做了个验证程序. 发现客户端连续发来1000个1024字节的包,服务器端出现了丢包现象. 纠其原因,是服务端在还未完全处理掉数据,客户端已经数据发送完毕且关闭了. 我用过sleep(10),暂时解决这个问题,但是这不是根本解决办法,如果数据量大而多,网络情况不太好的话,还是有可能丢失. 你试着用阻塞模式吧... select...我开始的时候好像也遇到过..不过改为阻塞模式后就没这个问题了... 采用回包机制,每个发包必须收到回包后再发下一个 UDP丢包是正常现象,因

MySQL连接数超过限制的解决方法

最近网站出现 User 数据库名称 has already more than 'max_user_connections' active connections 的报错,网站瘫痪.有必要研究下这个问题. max_user_connections 是 MySQL 用户连接数的最大值设置,整段语句的意思是:服务器的 MySQL 的最大连接数参数设置不足.解决方法:修改 MySQL 安装目录下 my.ini 或者 my.cnf 文件内的 max_user_connections 参数的数值,重启 M

小程序---&gt;小程序图片上传阿里OSS使用方法

小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到的问题及解决办法: 1.cryptojs,sha1js,hmacjs,base64js在哪下载及使用方法: 文件可以在阿里oss实例文档中找到. 在运用过程中如果是通过require引入的,会找不到引入的方法,原因是这些js文档没有模块导出,可以在原文件里找到其顶部全局对象,exports出来即可.

vmware tools安装程序无法继续,Microsoft Runtime DLL安装程序未能完成安装。的解决方法

vmware tools安装程序无法继续,Microsoft Runtime DLL安装程序未能完成安装.的解决方法_华英雄_新浪博客 http://blog.sina.com.cn/s/blog_54bf02090100xlqy.html   现象:VMware Workstation 8.0在安装VMware Tools时弹出对话框,提示"安装程序无法继续.Microsoft Runtime DLL安装程序未能完成安装."如图: 原因:虚拟机中Windows Installer服务

ADODB.Connection 错误 &#39;800a0e7a&#39; 未找到提供程序。该程序可能未正确安装。解决方法!

[问题描述]调试基于ACCESS+ASP的网站程序的时候,遇到如下错误: ADODB.Connection 错误 '800a0e7a' 未找到提供程序.该程序可能未正确安装. /Inc/Function.asp,行 9 [原因分析]因为系统是64位的win7或win8.1所以会出现这个问题,解决方法如下: [解决方法]找到IIS应用程序池,“设置应用程序池默认属性”-->“常规”-->”启用 32 位应用程序”,设置为 True即可解决. ADODB.Connection 错误 '800a0e