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",  // 分包名称
	"pages": [
		// 省略无数个页面路径
		...
		// 个人中心
		{
			"path": "personal/order",
			"style": {
				"navigationBarTitleText": "订单"
			}
		},
		{
			"path": "personal/message",
			"style": {
				"navigationBarTitleText": "消息"
			}
		}
	 ]
}],

3.页面预加载

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度

• 在刚刚 pages.json 中继续添加 preloadRule 预加载配置

• packages：表示进入 pages/index/index1 这个页面后加载pagesOther这个分包，值为 __APP__ 时表示主包

• network：在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）

"preloadRule": {
	"pages/index/index1": {
		"network": "all",
		"packages": ["pagesOther"]
	}
},

然后我们可以看下运行时的依赖分析

二、页面跳转

类似HTML中的 <a> 组件，但只能跳转本地页面。目标页面必须在pages.json中注册

1.UNI跳转方法

uni方法进行跳转

uni.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面

uni.redirectTo

关闭当前页面，跳转到应用内的某个页面

uni.reLaunch

关闭所有页面，打开到应用内的某个页面

uni.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

uni.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

uni.preloadPage

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快

2.封装为vue全局方法

我们可以自己封装为Vue方法，来调用跳转与传参跳转

vue2写法

var utils = {};
//公共处理方法
utils.install = function(Vue, option) {
  // 页面跳转
  Vue.prototype.jump = function(path) {
    uni.navigateTo({
    	url: path
    })
  };
  // 返回
  Vue.prototype.back = function(obj) {
	uni.navigateBack(obj);
  };
  // 带参跳转
  Vue.prototype.togo = function(url,data){
  	url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  	uni.navigateTo({  
  		url
  	}) 
  };
  function param(data) {
    let url = ''
    for (var k in data) {
      let value = data[k] !== undefined ? data[k] : ''
      url += '&' + k + '=' + encodeURIComponent(value)
    }
    return url ? url.substring(1) : ''
  };
  // 获取登录用户
  Vue.prototype.getUserInfo = function() {
	let res = uni.getStorageSync('userInfo');
	if (res) {
		return res
	} else {
		return {}
	}
  };
};

export default utils;

在 main.js 中use一下就可以在页面用了

import utils from './common/util.js'
Vue.use(utils)

携带 userid 跳转到 order 页面

togoOrderList(userid) {
  this.togo('/pagesOther/personal/order',{userId: userid})
}

vue3写法

import { App } from 'vue'
import http from './http'

const setupUtils = (app: App) => {
  // 请求
  app.config.globalProperties.$http = http
  // 页面跳转
  app.config.globalProperties.jump = (path: string) => {
    uni.navigateTo({
      url: path,
    })
  }
  // 返回
  app.config.globalProperties.back = (obj: Object) => {
    uni.navigateBack(obj)
  }
  // 跳转传参
  app.config.globalProperties.togo = (url: string, data: Array<any>) => {
    url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
    uni.navigateTo({
      url,
    })
  }
  const param = (data: Array<any>) => {
    let url = ''
    for (let k in data) {
      let value = data[k] !== undefined ? data[k] : ''
      url += '&' + k + '=' + encodeURIComponent(value)
    }
    return url ? url.substring(1) : ''
  }
  // 获取文件API
  app.config.globalProperties.getFileApi = () => {
    return 'http://localhost:8089/api/file/'
  }
  // 日期处理等等...
}

export default setupUtils

代码暂时放在了 gitee 上 uni-mc，方便大家查看

目前 uni-mc 项目使用 cli 方式运行，使用了阿里云函数