uniapp小程序分包机制

uniapp分包是为了配置小程序的分包加载机制。因为小程序有体积和资源加载限制。为什么小程序要提供一个分包机制呢？下面先了解小程序分包机制之后，再对uniapp进行配置分包。

什么是分包？

打开小程序之前，会把整个小程序的代码包下载到本地，这种策略可以缓解页面跳转时白屏的问题。同时微信还对小程序代码包大小设置了 2M 的上限来保证小程序能的快速启动。但在日益复杂的场景中发现 2MB 的大小限制了小程序功能的扩展，不利于业务开展。为了解决这一问题，微信推出了分包加载这一方案。以微信小程序的官方文档为例，开发者可以为小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

分包技巧

如果小程序项目足够复杂，代码量超过2M。那么必须将项目进行分包。

微信小程序

• 小程序包不超过20M（主包+分包），单个包不超过2M

百度小程序

• 小程序包不超过8M（主包+分包），单个包不超过2M

支付宝小程序

• 小程序包不超过8M（主包+分包），单个包不超过2M

QQ小程序

• 小程序包不超过24M（主包+分包），单个包不超过2M

字节小程序

• 小程序包不超过16M（主包+分包），单个包不超过2M

uniapp分包配置

开启分包

在manifest.json文件中开启分包

"app-plus": {
    "optimization": {
        "subPackages": true	//开启分包
    },
    "runmode" : "liberate" // 开启分包优化后，必须配置资源释放模式
}

目录

┌─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

pages.json 配置subPackages分包路径

{
    "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", // all（不限网络）、wifi（仅wifi下预下载）
            "packages": ["__APP__"] // 进入页面后预下载分包的 root 或 name。__APP__ 表示主包。
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }
}

uniapp分包项目实例

项目截图：

项目代码：

pages.json

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/login/index",
            "style": {
                "navigationStyle":"custom"
                // "navigationBarTitleText": "登录"
            }
        }
        
    ],
    "subPackages":[
        {
            "root":"pageA",
            "pages":[
                {
                    "path": "index/index",
                    "style": {
                        "navigationBarTitleText": "首页"
                    }
                }
            ]
        }
    ],
    "preloadRule":{
        "pageA/index/index":{
            "network":"all",
            "packages":["__APP__"]
        }
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

目录结构

|-.hbuilderx
|-pages
  |--login
     |--index.vue
|-pageA
  |--index
     |--index.vue
|-static
|-unpackage
|-App.vue
|-main.js
|-manifest.json
|-pages.json
|-uni.scss

微信开发工具截图

项目完整代码已经上传到gitee仓库，可以直接运行。 下载uniapp分包机制项目demo