关于微信小程序（uniapp）的优化

前言

开篇雷击

好害怕

怎么办

不要慌

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

---

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

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

微信小程序官方规定主包大小不能超过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"] // 要下载的分包
		}
    }

总结

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