uni-app分包优化、页面预加载、页面跳转等封装

---

优化

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。

---

一、分包优化

注意：

• subPackages 里的pages的路径是 root 下的相对路径，不是全路径。
• 微信小程序每个分包的大小是2M，总体积一共不能超过16M。
• 分包下支持独立的 static 目录，用来对静态资源进行分包。
• uni-app内支持对微信小程序、QQ小程序、百度小程序、支付宝小程序、字节小程序(HBuilderX 3.0.3+)分包优化，即将静态资源或者js文件放入分包内不占用主包大小。
• 针对vendor.js过大的情况可以使用运行时压缩代码
  • HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码
  • cli创建的项目可以在package.json中添加参数–minimize，示例：“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize”

1.目录

pages是我们的主包，里面有登录页和index开头的3个底部tabBar选项卡页面。pagesOther里面是我们的分包，里面有个人中心的一些订单和消息页面。

注意：tabBar 页面以及引用的页面都需要放在主包，静态文件夹名为 static

	┌─pages               
	│  ├─index
	│  │  └─index.vue    
	│  ├─index2
	│  │  └─index2.vue    
	│  ├─index3
	│  │  └─index3.vue    
	│  └─login
	│     └─login.vue    
	├─pagesOther
	│  ├─static
	│  └─personal
	│     └─order.vue 
	│     └─message.vue 
	├─static             
	├─main.js       
	├─App.vue          
	├─manifest.json  
	└─pages.json            

2.分包配置

修改 mainfest.json 配置，点击源码视图，在 mp-weixin 中加入以下代码

修改 pages.json 配置，在 pages 同级下新增 subPackages，分包中配置了 page 路径后，主包 pages 中就不需要了

"pages": [
	// 登录
	{
   
		"path": "pages/login/login",
		"style": {
   
			"navigationBarTitleText": "登录"
		}
	},
	// 选项卡
	{
   
		"path": "pages/idnex1/idnex1",
		"style": {
   
			"navigationBarTitleText": "选项卡一"
		}
	},
	{
   
		"path": "pages/idnex2/idnex2",
		"style": {
   
			"navigationBarTitleText": "选项卡二"
		}
	},
	{
   
		"path": "pages/idnex3/idnex3",
		"style": {
   
			"navigationBarTitleText": "选项卡三"
		}
	}
   ],
"subPackages": [{
   
	"root": "pagesOther",