前言

开篇雷击

好害怕

怎么办

不要慌

仔细看完文章，彻底解决代码包大小超过限制

提示：以下是本篇文章正文内容，下面案例可供参考

一、微信小程序上传时的规则

微信小程序官方规定主包大小不能超过2M，单个分包大小也不能超过2M，多个分包总大小不能超过8M，文件过大会增加启动耗时，对用户体验不友好。

官方解释：

二、分析、整理项目中的文件

1.正常来说一个小程序该有以下目录构成：

│

│——.hbuilderx       	    

│

│——api       			// 接口路径及请求配置                       

│

│——components			// 公共组件

│

│——config			        // 全局配置

│

│——node_modules           	// 项目依赖

│

│——pages        		        // 项目主包

│

│——order        		        // 项目分包

│

│——static			        // 静态资源

│  │

│  ├─scss        		        // 主包css样式

│  │

│  ├─js       			// 全局js方法

│  │

│  └─image      		        // tabBar图标目录

│

│——store     			// Vuex全局状态管理

│

│——utils     			// 封装的特定过滤器

│

│——error-log			// 错误日志

│......

│

2.和自己本地的文件目录对比一下，分析后根据实际情况整理出规范的目录，相同文件规整至一起，删除多余的文件，检查每个页面中是否存在未使用的引用资源

三、按以下思路调整

1.图标资源建议只留下tabBar图标（注意：tabBar图标的大小，控制在30-40k左右最优），其余资源通过网络路径访问，有条件的就上个CDN加速好吧。

2.主包目录建议只留下tabBar相关的页面，其余文件按分包处理（注意：单个分包大小也不能超过2M，多个分包总大小不能超过8M，根据业务划分出合理的分包：例如：order、pay、login、setting、user...）

3.公共组件，公共方法的使用（建议：把分包理解成一个单独的项目，scss，js，components，小程序插件...这些都是仅限于这个分包内使用，后期也方便维护）

4.避免使用过大的js文件，或替换为压缩版或者mini版

5.检查是否存在冗余代码，抽出可复用的进行封装

6.小程序插件（建议：挂载在分包上使用，挂载主包上会影响体积）

	{
// 分包order
"root": "order",
"pages": [{
"path": "index",
"style": {
"navigationStyle": "custom",
"usingComponents": {
"healthcode": "plugin://xxxxx"

						}

					}

				}

			],
//插件引入
"plugins": {
"healthcode-plugin": {
"version": "0.2.3",
"provider": "插件appid"

				}

			}

	}

7.根据官方建议开启按需引入、分包优化
manifest.json-源码视图

	"mp-weixin" : {
"appid" : "xxxxx",
"setting" : {
"urlCheck" : false,
"minified" : true

        },
// 按需引入
"lazyCodeLoading" : "requiredComponents",
"permission" : {
"scope.userLocation" : {
"desc" : "获取您的位置信息，用于查询数据"

            }

        },
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ],
// 分包优化
"optimization" : {
"subPackages" : true

        }

    }

8.Hbuilderx工具点击发行-微信小程序 （注意：运行默认是不会压缩代码）

四、终极办法

如果按以上步骤下来，还是提示代码大小超过限制的话，不妨从微信开发工具上试试

按图勾选上相关配置（注意：不要勾选上传代码时样式自动补全，会增加代码体积）

五、写在最后

1.提升小程序首页渲染速度 官方给出的代码注入优化

首页代码避免出现复杂的逻辑，控制代码量，去除无用的引入，合理的接口数量

2.小程序加载分包时可能会遇到等待的情况，解决这个问题的办法：

pages.json文件开启分包预下载

    "preloadRule": {
"pages/index": { // 访问首页的时候就开始下载order、pay分包的内容
"network": "all", // 网络环境 all全部网络，wifi仅wifi下预下载
"packages": ["order","pay"] // 要下载的分包

		}

    }

总结

本文介绍了开发微信小程序时，遇到的代码包大小超过限制的问题，希望可以帮助到你。