uniapp微信小程序分包以及分包优化

分包限制说明

微信小程序上传项目时会有分包大小限制，官方文档介绍：
目前小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 30M（服务商代开发的小程序不超过 20M）
• 单个分包/主包大小不能超过 2M

主包就是Tabbar页面，所有的Tabbar页面加起来的文件大小不能超过2M
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

你可以在这里查看当前项目的分包大小和依赖分析

uniapp分包

pages.json文件中

• pages 主包
• subPackages 子包

在uniapp的pages.json文件中，pages存储的是主包，一般我们的Tabbar页面都会写在pages里
另外，根目录除了你配置的子包，都算在主包内，比如：

• components
• static
• uni_modules
• utils
• ...

所以我们在引入第三方组件、公共方法、静态资源时需要注意主包占用空间
下面是一个分包的示例：

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/home/index",
            "style": {
                "navigationBarTitleText": "首页",
                "navigationStyle": "custom", // 隐藏系统导航栏
                "navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
            }
        }
    ],
    "subPackages": [
        {
            "root": "subPackages/login", // 子包的根目录
            "pages": [
                {
                    "path": "pages/login/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "navigationStyle": "custom",
                        "navigationBarBackgroundColor": "#ffffff"
                    }
                }
            ]
        },
        {
            "root": "subPackages/setting", // 子包的根目录
            "pages": [
                {
                    "path": "pages/system/index",
                    "style": {
                        "navigationBarTitleText": "设置",
                        "navigationBarTextStyle": "black",
                        "navigationBarBackgroundColor": "#F3F3F3"
                    }
                },
                {
                    "path": "pages/user/index",
                    "style": {
                        "navigationBarTitleText": "用户设置",
                        "navigationBarTextStyle": "black",
                        "navigationBarBackgroundColor": "#F3F3F3"
                    }
                }
            ]
        }
    ]
}

结构如下：

Project
├─ subPackages
│  ├─ setting
│  │  └─ pages
│  │     ├─ user
│  │     │  └─ index.vue
│  │     └─ system
│  │        └─ index.vue
│  └─ login
│     └─ pages
│        └─ login
│           └─ index.vue
└─ pages
   └─ home
      └─ index.vue

Project为你的项目文件夹，其中pages为主包，而subPackages为子包
subPackages内有两个子包，分别是setting、login
按照官方的说法，子包其实可以跟pages同级，你只需要在subPackages配置的root里配置好路径即可，我在这里将所有子包都写在subPackages文件夹内，方便统一管理
之后你正常写页面即可，主包和子包已经分好了，Tabbar的页面就写在pages里，非Tabbar页面就写在subPackages内。

页面跳转
跳子包

uni.navigateTo({
  url: '/subPackages/setting/pages/user/index'
});

跳主包

uni.navigateTo({
  url: '/pages/home/index'
});

页面跳转没有什么区别，正常跳就好了

分包优化

uniapp配置manifest.json启用分包优化

manifest.json内配置

"mp-weixin": {
 
   "optimization":{"subPackages":true}
 
}

分包预加载配置

目的：当我们进到某个页面时，有些子包访问概率很大，可以预先加载子包资源，提升进入后续分包页面时的启动速度
preloadRule中，key是页面路径，value是进入此页面的预下载配置，每个配置有以下几项：

假如，你进入登录页后，需要预先加载subPackages/setting子包，配置如下：
pages.json

    "preloadRule": {
        "subPackages/login/pages/login/index": { // 指定页面
            "network": "all", //指定网络 all 不限网络   wifi：仅wifi
            "packages": ["subPackages/setting"] // 进入指定页面后需要加载的分包 root 或 name
        }
    },

当你进入指定页面后，比如登录页，控制台打印preloadSubpackages: success则说明分包预加载成功了。

节省uni_modules的体积占用

有时候我们在插件市场下载的组件只在某个子包内使用，此时可以直接将uni_modules移到子包内，这样可以减少主包的体积

像这样，直接移到子包的根目录，你在对应页面使用的时候需要按照路径引入

<template>
  <view>
    <KevyEmpty/>
  </view>
</template>

<script setup>
import KevyEmpty from '@/subPackages/setting/uni_modules/kevy-empty/components/kevy-empty/kevy-empty.vue';
</script>

---

参考文档：
分包加载
关于分包优化的说明
preloadRule分包预加载