微信小程序主包太大分包配置 ---------- 小白的天堂

微信小程序分包配置

1. 添加分包配置
   在 page.json 文件中加入分包配置，和 pages属性同级：

"subpackages": [
      {
        "root": "packageA", // 分包名称，相对于根目录的路径
		"name": "pack1",	// 分包别名，分包预下载时可以使用
        "pages": [	// 分包页面路径，相对于分包根目录
			{
				"path": "pages/report/index",
				"style": {
					"navigationBarTitleText": "图表展示"
				}
			}，
			{
				"path": "pages/order/index",
				"style": {
					"navigationBarTitleText": "订单管理"
				}
			}
        ]
      },
      {
        "root": "packageB",
        "name": "pack2",
        "pages": [
          {
           	"path": "pages/online/index",
           	"style": {
           		"navigationBarTitleText": " 在线表单"
           	}
           }
        ]
      }

2. 目录结构
   上边我们创建了两个分包路径，一个 packageA，一个 packageB，然后我们需要在项目根目录创建这两个文件夹，然后在对应的文件夹下创建pages 目录和页面

├── app.js
├── app.json
├── app.wxss
├── packageA
│		├── common // 分包中单独的配置文件及通用配置
│		├──	.... // 其他目录
│   	└── pages
│       	├── report
│			│		└── index.vue
│       	├── order
│			│		└── index.vue
│       	└── ... // 其他页面
├── packageB
│		├── common // 分包中单独的配置文件及通用配置
│		├──	.... // 其他目录
│   	└── pages
│       	├──  online
│			│		└── index.vue
│       	└── ... // 其他页面
├── pages
│   ├── index
│   └── ... // 其他页面
└── utils

3. 页面跳转

3.1 从 主包跳主包（跳转路径不变）

	uni.navigateTo({
		url: '/pages/order/index'
	})

3.2 从主包跳分包（跳转路径需要加上分明名称）

	// 跳转packageA 包
	uni.navigateTo({
		url: '/packageA/pages/report/index'
	})
	// 跳转packageB 包
	uni.navigateTo({
		url: '/packageB/pages/online/index'
	})

3.3 分包内的跳转（方法同主包跳转一样）

	// packageA 包内跳转，需要带分包目录（report 跳转 order）
	uni.navigateTo({
		url: '/packageA/pages/order/index'
	})

3.4 分包之间的跳转 （packageA 跳转 packageB）

	// 方法同主包跳转分包一样，需要加分包名
	uni.navigateTo({
		url: '/packageB/pages/online/index'
	})

4. 引用原则

• packageA 无法 require packageB JS 文件，但可以 require 主包、packageA 内的 JS 文件；使用 分包异步化 时不受此条限制
• packageA 无法 import packageB 的 template，但可以 require 主包、packageA 内的 template
• packageA 无法使用 packageB 的资源，但可以使用主包、packageA 内的资源

5. 打包原则

• 声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置
• 路径外的目录将被打包到主包中
• 主包也可以有自己的 pages，即最外层的 pages 字段。
• subpackage 的根目录不能是另外一个 subpackage 内的子目录 tabBar 页面必须在主包内