前段时间公司在开发一个小程序,前期没做好规划,导致代码很容易就超过了2m,最后非常痛苦,结构再优化也没用

只有一种解决办法--->分包,分包后最大体积20m

做完之后自己也做个笔记记录一下，构建小程序的步骤就不多说了，有理解或技术上的问题欢迎大家指出来哈，以一个图书馆为原型分的包，简易效果如图

一、创建分包目录

由于tabBar页只能放到主包，所以先创建好。分包跟主包都是同处src目录下,其中

二、开启分包

src---manifest.json目录下,找到"mp-weixin"对象,里面添加

"optimization":{"subPackages":true},   //开启分包

但这个时候,我收到了报错---> Error: xxx.js 已被代码依赖分析忽略，无法被其他模块引用” 百度了一下解决办法 解决方式：

1. 修改依赖引用的代码：可根据控制台中的【代码依赖分析异常】提示进行修改。 （推荐）
2. 关闭过滤无依赖文件：project.config.json 中 settings 选项添加 ignoreDevUnusedFiles: false , ignoreUploadUnusedFiles: false developers.weixin.qq.com/community/d…

所以最终的设置就是

	"mp-weixin": { /* 微信小程序特有相关 */
		"appid": "",
    "optimization":{"subPackages":true}, //开启分包
		"setting": {
			"urlCheck": false,
      "ignoreDevUnusedFiles": false,
      "ignoreUploadUnusedFiles": false

		},
		"usingComponents": true
	},

三、分包加载配置

找到src目录下的page.json文件

1.page正常添加tabbar页面,输入路径

	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
    {
			"path": "pages/Library/index",
			"style": {
				"navigationBarTitleText": "图书馆"
			}
		}

2.添加分包加载配置

	"subPackages": [{
		"root": "page_Library", //子包的根目录
		"pages": [{ //这里的配置路径和pages里的一样
				"path": "index/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
				"style": {
					"navigationBarTitleText": "",
					"enablePullDownRefresh": false
				}
			}
		]
	}],

3.分包预加载配置

	"preloadRule": {
		// 当我们进入了pages/index/index页面以后就会预下载page_Library分包
		"pages/index/index": {
			"network": "all",	//在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）
			"packages": ["page_Library"]	//进入页面后预下载分包
		}
	},

同时不要忘记设置tabbar

  "tabBar":{	//设置底部 tab 的表现
		"color": "#909399",		//tab 上的文字默认颜色
		"selectedColor": "#303133",		//tab 上的文字选中时的颜色
		"backgroundColor": "#e5e5e5",	//tab 的背景色
		"borderStyle":"white",		//tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值
		"list": [	//tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
			{
				"pagePath": "pages/index/index",	//页面路径，必须在 pages 中先定义
				"text": "首页"		//tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
			},
      {
				"pagePath": "pages/Library/index",	//页面路径，必须在 pages 中先定义
				"text": "图书馆"		//tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
			}
		]
	},

四、分包后的使用

tabbr页面就在page页面书写，写在分包的页面直接使用跳转api跳转过去即可使用

to() {uni.navigateTo({url: '/page_Library/index/index'})}}
//跳转路径为 分包的root(page_Library)/分包的pages下面的路径(path)拼接