分包限制説明

微信小程序上傳項目時會有分包大小限制，官方文檔介紹：
目前小程序分包大小有以下限制：

• 整個小程序所有分包大小不超過 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分包預加載