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

  • 相关阅读:
    fio工具讲解
    flask迁移数据库报错
    base64编码
    OpenStack学习笔记,未完待续
    docker运行报错
    centos搭建SVN服务器并实现自动同步至web目录 (必定安装成功)
    centos/linux 源码安装mysql详细记录
    centos7.7安装php7.3的lnmp环境和composer详细步骤
    laravel-admin使用ueditor重命名图片名称问题
    nginx 图片防盗链 设置
  • 原文地址:https://www.cnblogs.com/puerile/p/11884790.html
Copyright © 2011-2022 走看看