小程序得分包详解

小程序开启分包后，可以将不同的功能或页面放到不同的子包中进行管理，以达到减轻主包体积、提高启动速度和加载效率的目的

在小程序项目根目录下的 app.json 文件中，需要添加 subpackages 字段并设置子包的相关信息。示例代码如下：

{
  "pages":[
    "pages/home/home"
  ],
  
  "subPackages": [{
    "root":"pagA",
    "name":"pagA",
    "pages": [
        "pages/cat/cat",
        "pages/cae/cae"

    ]
  },{
    "root":"pagB",
    "name":"pagB",
    "pages": [
        "pages/dog/dog"
    ],
    "independent": true
  }
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
 
  "sitemapLocation": "sitemap.json"
  
}

其中，root 表示子包的根目录；name 表示子包的名称，必须和 root 相同；pages 表示该子包中包含的页面路径；independent 表示该分包是否独立分包，当不设置该属性或者设置为 false 时，表示该分包依赖主包，而设置为 true 时则表示该分包为独立分包。

在需要使用子包中组件或页面的地方，使用如下方式引用

{
  "usingComponents": {
    "custom-tabs": "/subpackage1/components/custom-tabs"
  }
}

在子包中不支持使用绝对路径（如 /pages/index/index）跳转到主包的页面；
分包
3.1：独立分包：独立分包是指将小程序的页面和资源拆分成一个单独的包，与主包互相独立。这种分包方式通常应用在功能复杂完整、独立使用场景较多的小程序中。独立分包需要通过配置 app.json 文件来进行设置，以便让微信客户端知道如何处理分包的加载和启动。
需要注意的是，在独立分包中，每个子包都必须包含一个 app.js 文件作为入口文件，以便微信客户端正确地识别和加载分包。
```
{
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "index",
        "list"
      ],
      "independent": true
    },
    {
      "root": "packageB",
      "pages": [
        "index"
      ],
      "independent": true
    }
  ]
}
```
3.2：不独立分包：不独立分包主要是针对一些较大的主包应用，通过分离出一部分次要页面和资源，减少主包的大小。这种分包方式不会影响项目原有的依赖关系，分包与主包之间共享同一份运行环境。当用户访问到分包页面时，微信客户端会自动下载分包并启动，因此不需要额外的配置和处理。
```
{
  "subPackages": [
    {
      "root": "pages/packageA/",
      "pages": [
        "index",
        "list"
      ]
    },
    {
      "root": "pages/packageB/",
      "pages": [
        "index"
      ]
    }
  ]
}
```

小程序得分包详解

猜你喜欢