分包加载

当小程序的业务量增长到一定数量时，小程序的体积也逐步膨胀。不得不压缩体积，已避免后序的再度膨胀。

而微信小程序整个包大小不得超过12M，主包或单包不能超过2M。

所以为了更好的开发体验，以及用户体验，更重要的是能够帮助团队解耦，所以使用分包是一种很好的处理方式。

分包有三种：

• 普通分包
• 独立分包
• 预下载分包

普通分包

普通分包是依赖于主包的，必须要有一个主包，才能分包。

如何使用？

分包的目录如下：

.
├── App.vue
├── main.js
├── manifest.json
├── packageA
│   └── index
│       └── index.vue
├── pages
│   └── index
│       └── index.vue
├── pages.json
├── static
│   └── logo.png
└── uni.scss

然后在pages.json文件中编辑：

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    }
  ],
+ "subpackages": [
+    {
+      "root": "packageA", //  分包名
+      "pages": [
+        {
+          "path": "index/index" // 分包的页面
+        }
+      ]
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

其中，subpackages是指分包的目录配置。root是指分包的根路径，必须填写。

---

打包原则

• 分包是按照分包的顺序进行打包的，所有的subpackages配置以外的文件路径，全部都被打包在主包（App）内。

• subpackages无法嵌入另一个subpackages。

• tabBar页面必须在App主包内。

---

分包的引用&导入规则

所有分包都无法引用(import,require)子分包内的JS文件、template、资源文件。

但是可以引用全局文件，可以引用主包(App)内的JS文件、template、资源文件。

独立分包

独立分包不同于其他主包和分包，它可以是独立存在。

普通的分包必须依赖于主包，但独立分包不依赖于任何包，而且可以有多个独立分包存在。

因为是独立分包运行，所以无法引入任何包的的内容。

如何使用？

只需要在分包中添加independent为true即可。

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    }
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        {
          "path": "index/index"
        }
	  ],
+	  "independent":true
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

注意事项

在小程序内，因为独立分包的特殊性，独立分包启动时，不一定拿到App的数据，因为onLaunch很有可能载入的是分包。而为了满足这一需求，可以使用allowDefault参数在独立分包内。

<!-- packageA/log/log-->
<script>
  export default {
    onShow() {
      const app = getApp({
        allowDefalut: true
      });
      app.log = 1;
    }
  };
</script>

然后在启动主包之后，即可获取globalData了。

<script>
export default {
  onShow() {
    const app = getApp();
    console.log(app); // {log:1}
  }
};
</script>

预下载包

预下载包是指，当小程序进入到某一个页面后，可以自动地下载包中的内容。其中也独立分包也适用。

页面结构如下：

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"enablePullDownRefresh": true
			}
		},
		{
			"path": "pages/index/about"
		}
	],
	"subPackages": [
		{
			"root": "PageA",
			"pages": [
				{
					"path": "log/log"
				}
			],
			"independent": true
		}
	],
+	"preloadRule": {
+		"pages/index/index": { // 当进入这个包页面的时候
+			"network": "all",
+			"packages": [
+				"PageA"  // 下载包
+			]
		}
	},
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarBackgroundColor": "#27ae60",
		"backgroundColor": "#F8F8F8"
	}
}

分包下载的参数选项：

• network

  • wifi - 是指只在wifi的网络情况下下载包。
  • all- 是指在所有网络的情况下下载包。

• packages

  • __APP__ - 是指下载所有包
  • name - 指定的包或者 path