小程序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方法，来调用跳转与传参跳转

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})
}


当然也可以使用uni三方组件进行页面跳转







作者：小码哥

欢迎关注微信公众号 ：码出宇宙

扫描添加好友邀你进技术交流群，加我时注明【姓名+公司(学校)+职位】