微信小程序分包

微信小程序实现分包加载

1、使用分包

目录结构如下：

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

通过在 app.json subpackages 字段声明项目分包结构

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",  // root:分包根目录 
      “name”:"packA",  // name:分包别名
      "pages": [
        "pages/cat", // 分包中的页面
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

2、独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。

可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。

一个小程序中可以有多个独立分包。

项目目录结构如下

├── app.js
├── app.json
├── app.wxss
├── moduleA
│   └── pages
│       ├── rabbit
│       └── squirrel
├── moduleB
│   └── pages
│       ├── pear
│       └── pineapple
├── pages
│   ├── index
│   └── logs
└── utils

在 app.json 的 subpackages 字段中对应的分包配置项中定义 independent 字段声明对应分包为独立分包。

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true
    }
  ]
}

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。

注意事项
独立分包中无法获取App 对象
解决方案

独立分包中
const app = getApp({allowDefault: true}) // {}
app.data = 456
app.global = {}
console.log(app)// {data:456,global:{},...}

3、分包预加载

预下载分包行为在进入某个页面时触发，通过在 app.json 增加 preloadRule 配置来控制。

// 见1、使用分包目录结构
  "preloadRule": {
    "pages/packageA/pages/cat/cat":{
      "network": "all",
      "packages":["pages/packageA"]
    },
    "pages/packageB/pages/apple/apple":{
      "network": "all",
      "packages":["pages/packageB"]
    }
  }

4、分包与主包页面之间的跳转

// 页面中
  <navigator url="../packageA/pages/cat/cat">packageA-cat</navigator>
// js中
  wx.navigateTo({
      url: '../packageA/pages/cat/cat' // 相对路径
  })

详情见微信官方文档