微信小程序包大小超过2M的解决方法—分包加载

小程序的包被限制在2M以下， 超出的时候点击预览， 发现报错：
Error: 代码包大小为 3701 kb，上限为 2048 kb，请删除文件后重试

解决方法：

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

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

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

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

另外， 通过cli命令创建的uni app项目，可将图片或字体图标放入assets文件夹下，通过require引入， 也可减少主包大小

3. 分包加载

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

对于用户来说，小程序的加载流程变成了：

1，首次启动，加载小程序主包，显示主包内的页面
2，如果用户进入了某个分包的页面，再加载这个对应分包，显示分包的页面

采用分包加载，对于开发者而言，能使小程序有更大的代码体积，承载更多的功能和服务，对于用户而言，可以更快的打开小程序，同时再不影响启动速度的前提下使用更多功能。

分包的划分：

在配置前首先需要开发者规划下各个分包需要容纳的内容，建议开发者按照功能划分的原则，将同一个功能下的页面和逻辑放置于同一个目录下，对于一些跨功能之间的公共逻辑，将其放置于主包下，这样可以确保在分包引用这部分功能时，这部分的逻辑一定存在。

在分包划分时，应该注意以下事项：

1，避免分包与分包之间引用上的耦合。因为分包的加载是用户操作触发的，并不能确保其分包加载时，
另一个分包就一定存在，这个时候可能导致js逻辑异常，某些资源找不到的错误；
2，一些公共用到的自定义组件，需要放在主包内；
3，使用小程序自带的tab切换时，list中的页面需要放在主包内。

分包的配置：（微信客户端 6.6.0，基础库 1.7.3 及以上版本开始支持。）

当理清了分包的划分后，就可以进行分包的配置了，这一步并不复杂。

假设支持分包的小程序目录结构如下：

├── app.js├── app.json├── app.wxss├── packageA│   └── pages│       ├── cat│       └── dog├── packageB│   └── pages│       ├── apple│       └── banana├── pages│   ├── index│   └── logs└── utils

开发者通过在 app.jsonsubPackages字段声明项目分包结构：

{  "pages":[    "pages/index",    "pages/logs"  ],  "subpackages": [    {      "root": "packageA",      "pages": [        "pages/cat",        "pages/dog"      ]    }, {      "root": "packageB",      "name": "pack2",      "pages": [        "pages/apple",        "pages/banana"      ]    }  ]}

目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过 20M
单个分包/主包大小不能超过 2M

低版本兼容：

由微信后台编译来处理旧版本客户端的兼容，后台会编译两份代码包，一份是分包后代码，另外一份是整包的兼容代码。 新客户端用分包，老客户端还是用的整包，完整包会把各个 subpackage 里面的路径放到 pages 中。

示例项目：

下载 小程序示例（分包加载版）源码

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

1、在uni app中：

uni app通过cli初始化的小程序目录结构如下：

 ├── class="lazy" data-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`})

2、在taro中：

taro初始化的小程序目录结构如下：

├── class="lazy" data-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://blog.csdn.net/joe0235/article/details/129982536