UNIAPP----小程序分包及预加载

最近我负责的项目一百多个页面，写了一半，发现预览到小程序已经超过2048kb，得分包了。

找了很多资料才搞个差不多，当然最后分包成功并且做了优化。

步骤：

我是以四个tabbar来分的，分别是：首页-shouye、二手-ershou、经验-jingyan、我的-wode

1、这四个页面是tabbar.vue页面，全部放在pages.json的pages数组对象下面，官网有格式。

2、并且创建四个同名目录，

 四个tabbar兄弟目录和pages目录文件同一级别，官网也有示例。

3、

 仔细看这段代码

	"subPackages": [{
		"root": "shouye",
		"pages": [{
			"path": "fbhq/fbhq"
		}]
	}, {
		"root": "ershou",
		"pages": [{
			"path": "essp/essp"
		}]
	}, {
		"root": "jingyan",
		"pages": [{
				"path": "wdxx/wdxx"
			}
		]

	}, {
		"root": "wode",
		"pages": [{
				"path": "wdjs1/wdjs1"
			},
{
				"path": "wdjs2/wdjs2"
			}	
		]
	}],

在subPackages数组里面，

root是对应在pages里面四个tabbar的名字，相当于pages禁锢着四个tabbar，而root代表要去找的tabbar名字，所以有四个root，分别对应四个tabbar。

这里的pages数组是父级tabbar下面所有的，没有公共使用的所有儿子页面，就是下级页面，

得通过这个tabbar进入的，并且别的地方不能进入的，统统放在这个数组里面

 看上面代码的   "root" : "wode" 部分，也就是第四个root，里面可以写入多个path路径，因为一个tabbar下面有很多子页面，所以按这种写法，每个均为对象，即可。

并且后续继续在tabbar下级添加新的子页面，子页面路由会直接到当前tabbar配置下面，不用自己修改，这个很不错。

4、

这样把所有的页面都配置完之后，因为目录路径已被更改，所以之前的跳转页面路由什么得，都得改变，一个一个改，不过好改，因为hbx提供了新路径提示。

在开发者工具的详情下，点击上次预览，查看你刚分的包

5、优化、预加载

vendor.js如果过大，运行小程序之前在uniapp勾选运行时是否压缩代码

我还把图片放本地了，更好的是放服务器上。

然后还是在pages.json页面，这里面已经有pages，subPackages两个同级数组对象了，得加第三个。

preloadRule

	"preloadRule": {
		"pages/shouye/shouye": {
			"network": "all",
			"packages": ["shouye"]
		},
		"pages/ershou/ershou": {
			"network": "all",
			"packages": ["ershou"]
		},
		"pages/jingyan/jingyan": {
			"network": "all",
			"packages": ["jingyan"]
		},
		"pages/wode/wode": {
			"network": "all",
			"packages": ["wode"]
		}
	},

 pages/shouye/shouye   意思为你进入此tabbar页面就进行预加载，这写四个大tabbar名字就行。

network是需要如何加载，是wifi还是all。我选的all，因为不可能只用wifi加载。

packages是你要加载的主页面，里面就写一个，就写和pages同级的四个分包目录，其实就是四个大tabbar名字。意思为一旦进入到四大tabbar，立马加载当前呆的tabbar下，所有的子页面，我试了一下，感觉快了一点点。白屏时间减少一点点。

uniapp到小程序真机预览时，出现以下日志代表预加载成功

以上就是分包及预加载，我也是看了很多文档才弄好，仅供参考。

还有那些公共的，例如多页面都可以进入的子页面，写在哪，我看别人推荐直接放在pages.json下的pages里面，往里面一扔，到时候跳转注意路径就行。