uni-app 打包微信小程序 提示 包体积过大。无法上传,无法预览,无法手机在线调试。

uni-app 微信小程序 体积过大 解决方案

问题: 使用uni-app 框架 运行到微信开发工具后 提交代码 预览代码 均都是 体积过大无法提交和上传。

解决步骤:

1.原来就开发过微信小程序 出现这种问题无非就是 图片太多 体积太大了。但是我这次看了static 目录下 文件占用并不大。
在这里插入图片描述

因为staic 静态目录下文件并不大, 所有去看了页面文件的体积 发现 pages 目录中竟然已经到了 2M ,那这肯定是有问题的。

于是我去检查的文件大小。 发现 很多的 ××××.wxss 文件中的体积已经到了 400KB 了。 这很严重。于是我问了负责这个页面的人员。 发现他每一个页面都引入了 colorUI 的公共代码导致的。 这种公共的代码 都要放在app.vue 中统一加载。不要每个文件都放入,这是规范。

在这里插入图片描述

处理完这个问题后,在微信小程序的开发工具上看了一下体积,还是很大。并不能很好的解决这个问题。文件大小可以在 开发工具的右上角 点击详情 能看到体积


最终解决方法

uni-app 官网提到了 要分包管理的机制 让我分包来处理这个问题。

地址:https://uniapp.dcloud.io/collocation/pages?id=subpackages

看这个文档 肯定不太明白。他具体说的意思就是 需要分包管理你的文件。每个文件不能大于2M 。于是出现了一个问题 ,如果我在uni app 开发工具 Hbuilder X 里面 项目 page.json 编写这个的话。会不会影响其他的平台打包。

最重要的还是看了微信小程序的文档 我知道了解决访问。

微信小程序分包管理文档 -> https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html

研究了一会之后 ,才知道是在微信开发工具里面编写这个东西、具体的代码示例我发在下面。

在这里插入图片描述

里面怎么写呢? 看下放代码

  {
  "pages": [
  	// 这里面放的是 table 的页面地址 也就是那4个 目录下的文件。 
  	// 切记 如果 index目录下还有其他文件 也要写在这个里面 
  	// 我下面只有两个 table 所以写两个。 你有几个table 就写几个table 的页面路径
    "pages/index/index",
    // index-two 这个文件虽然不是 table 页面 但是他在 index 目录下面。所有也要引入进来
    "pages/index/index-two",
    "pages/index/guide",
    "pages/my/my",
    "pages/my/Aboutus/Aboutus"

  ],
  // 下面写的是 出table 页面目录外的其他 的页面文件  其他的就按我这个目录写就行 
  "subPackages": [
  		// 示例 不要复制这个
        {
          "root": "pages/文件夹名称",
          "pages": [
            "文件名称 去掉vue"
          ]
        },
        // 比如这个login 文件
    {
      "root": "pages/login",
      "pages": [
        "login",
        "register",
        "forget"
      ]
    },
    // 如果文件夹下面有多个文件的做法 
    {
      "root": "pages/util",
      "pages": [
        "loading",
        "upload-file/upload-file",
        "list-show/list-show"
      ]
    }
  ],
  // 下方代码 省略掉。 上面代码是有用的。
  }

tips

: 页面在创建的时候 不要已 table 来创建页面。根据业务来创建页面。
table 页面的4个文件夹 最好单独放,不要放在这table 文件夹下面。 你看下面的代码片段。
不要让这个里面的代码 越来越庞大。 如果这里面的页面超过一定体积 也会影响打包。
在这里插入图片描述
-----------------------------------2020-06-23 更新方法 -------------------

新增处理办法 不要忘了开启压缩

在这里插入图片描述

有问题 联系 qq 1019011560 欢迎指出问题,讨论问题。

  • 6
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值