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

骑猪看日落 2023-05-28 05:17 4阅读 0赞

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

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

### 解决步骤： ###

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 1]

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

--------------------

### 最终解决方法 ###

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

地址：[https://uniapp.dcloud.io/collocation/pages?id=subpackages][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][-_ https_developers.weixin.qq.com_miniprogram_dev_framework_subpackages_independent.html]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 2]

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

{ 
      "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 文件夹下面。 你看下面的代码片段。  
不要让这个里面的代码 越来越庞大。 **如果这里面的页面超过一定体积 也会影响打包。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 3]  
\-----------------------------------2020-06-23 更新方法 -------------------

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 4]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70]: /images/20230528/c1cbc6ad6d1d411696712292846b4bbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 1]: /images/20230528/0485e618a75747f58fc8e480f03aac7a.png
[https_uniapp.dcloud.io_collocation_pages_id_subpackages]: https://uniapp.dcloud.io/collocation/pages?id=subpackages
[-_ https_developers.weixin.qq.com_miniprogram_dev_framework_subpackages_independent.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 2]: /images/20230528/52f962366d4d40bbb03f2a1c14754499.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 3]: /images/20230528/22fa22e5b01b4e238f2dfaed6126eb61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 4]: /images/20230528/02d2578a1c5a4079a258583c31de5fb5.png