手把手教你uniapp和小程序分包

分包目的在于提高小程序的体积，多一个包就多2M，最多20M

常规的分包：

小程序一打开首先加载主包，然后再加载分包

分包可以用主包内的资源，主包不可以使用分包的资源

分包A不可以使用分包B里面的内容

分包可以使用app.wxss里面的全局样式

分包步骤如下：

1.在微信小程序开发者工具里面打开在app.json中添加如下字段

root：是包的名称，pages：是添加的路径，independent：是设置独立分包

2.独立分包：

会在主包加载之前调用

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效

主包中的app.wxss对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式

给packageB设置成独立分包

uniapp分包小程序

分包步骤：

1.配置manifest.json

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

优化分包：

在对应平台的配置(manifest.json)下添加"optimization":{“subPackages”:true}开启分包优化

目前只支持mp-weixin、mp-qq、mp-baidu的分包优化

静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用
js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

2.配置pages.json

在pages.json中新建数组"subPackages"，数组中包含两个参数：1.root：为子包的根目录，

2.pages：子包由哪些页面组成，参数同pages；

注意：主包和分包是不能再同一目录下，在构建uniapp项目时，可以考虑一下目录结构，以便后期进行分包；

3.分包预载配置（preloadRule）

做这一步主要为了优化速度，不想优化速度的可以跳过这个配置

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度

preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：

app的分包，同样支持preloadRule，但网络规则无效。

举个粟子

"preloadRule": {
    "pages/baseurl/index": {
      "network": "all",
      "packages": [
        "__APP__"
      ]
    },
    ""pages/baseurl/index": {
      "network": "all",
      "packages": [
        "pages-ppc"
      ]
    },
    ...
  },