目錄

一. 分包的概念

1. 什么是分包

2.?分包的好處

3.?分包后項目的構(gòu)成

4.?分包加載規(guī)則

5.?分包體積限制

二.?分包的方法

1.?分包后的目錄結(jié)構(gòu)

2.?配置manifest.json

3.?配置pages.json

4.?全局修改分包文件路徑文章來源地址http://www.zghlxwxcb.cn/news/detail-665116.html

一. 分包的概念

1. 什么是分包

分包指的是把一個完整的小程序項目，按照需求劃分為不同的子包，在構(gòu)建時打包成不同的分包，用戶在使用時按需進行加載。

2.?分包的好處

1. 優(yōu)化小程序首次啟動多個消災(zāi)時間
2. 方便團隊開發(fā)，解耦協(xié)作

3.?分包后項目的構(gòu)成

一個主包：一般只包含項目的啟動頁面或 TabBar 頁面、以及所有分包都需要用到的一些公共資源
多個分包：只包含和當(dāng)前分包有關(guān)的頁面和私有資源

4.?分包加載規(guī)則

在小程序啟動時，默認會下載主包并啟動主包內(nèi)頁面，當(dāng)用戶進入某個頁面時，客戶端會把對應(yīng)分包下載下來，下載完成后再進行展示

5.?分包體積限制

1. 整個小程序所有分包大小不超過20M（主包＋所有分包）
2. 單個分包／主包大小不能超過2M

二.?分包的方法

1.?分包后的目錄結(jié)構(gòu)

    ├── pages       // 主包
    │   ├── index
    │   └── logs
    ├── packageA        // 分包A
    │   └── pages
    │       ├── cat
    │       └── dog
    ├── packageB        // 分包B
    │   └── pages
    │       ├── apple
    │       └── banana
    ├── manifest.json       // 配置項
    └── pages.json      // 頁面路徑

2.?配置manifest.json

"mp-weixin":{
    "optimization":{
      "subPackages":true // 開啟分包優(yōu)化
    }
}

3.?配置pages.json

在pages.json中新建"subPackages"數(shù)組，"preloadRule"對象

1. "subPackages"數(shù)組中包含兩個參數(shù)：
    1.root：為子包的根目錄
    2.pages：子包由哪些頁面組成，參數(shù)同pages
注意：主包和分包是不能在同一目錄下，所以在構(gòu)建項目時，要考慮目錄結(jié)構(gòu)，以便后期進行分包

2. "preloadRule"中，key 是頁面路徑，value 是進入此頁面的預(yù)下載配置
    1. network指定網(wǎng)絡(luò)下預(yù)下載可選wifi/all（非必填）
    2. packages進入也買你后預(yù)下載的分包（必填）

{
  "pages": ["pages/index"],   // 主包內(nèi)頁面
  "subpackages": [
    {
      "root": "packageA",    // 分包A
      "pages": [
        {
          "path" : "pages/cat"
        },
        {
          "path" : "pages/dog"
        }
      ]
    },
    {
      "root": "packageB", // 分包B
      "pages": [
        {
          "path" : "pages/apple"
        },
        {
          "path" : "pages/banana"
        }
      ]
    }
  ],
  "preloadRule": {    // 分包預(yù)載配置 
    "pages/index": {    // 在進入小程序pages/index頁面時，由框架自動預(yù)下載分包A、分包B
      "network": "all",
      "packages": ["packageA","packageB"]
    }
  }
}

4.?全局修改分包文件路徑

webstorm 可通過 ctrl+shift+R 替換所有路徑

到了這里，關(guān)于uniapp微信小程序分包的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！