uinAPP 分包

• 原因
  目前微信支持每个包是2M，记住是单个包(即主包或单包)不能超过2M，总包不超过16M，有部分小程序收到微信邀请测试总包上限提至20M。

• 主包和分包如何划分

1. 所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；

2. 分包则是根据pages.json的配置进行划分。

3. 结构(注意: pages与pagesA平级)

┌─pages
│  ├─index
│  │  └─index.vue
│  └─login
│     └─login.vue
├─pagesA
│  ├─static
│  └─list
│     └─list.vue
├─pagesB
│  ├─static
│  └─detail
│     └─detail.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
    

image.png

4. 在 pages.json 中填写 (注意: 原有页面路径变了!!)

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }, {
        "path": "pages/login/login",
        "style": { ...}
    }],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }],
    "preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": [""]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }
}

• 验证

  
  image.png

• 压缩

1、开启分包优化（manifest.json）（可选)

// 全局样式
"globalStyle": {
// 编译到微信小程序样式
  "mp-weixin": {
          // 开启小程序端分包优化
      "optimization":{"subPackages":true}
  }
}

2、在编译器里勾选运行时压缩代码
3、上传代码时压缩css

• 参考资料

uni-app分包

uniapp分包

subPackages分包加载机制

使用分包

分包预下载