当前位置:首页 > 微信 > 正文

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

11-25 微信

标签:报错   开发者   dsd   ref   tin   目录   bar   文件   detail   

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

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

标签:报错   开发者   dsd   ref   tin   目录   bar   文件   detail   

温馨提示: 本文由杰米博客推荐,转载请保留链接: https://www.jmwww.net/weixin/15507.html

博客主人杰米WWW
杰米博客,为大家提供seo以及it方面技巧喜欢的朋友收藏哦!
  • 11365文章总数
  • 2266821访问次数
  • 建站天数
  • 头条文章

    图文推荐

    站长推荐

    友情链接