小程序之分包开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情.简单记录一下

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

随着业务的不断完善和增量.在原有基础上已经不能满足现状.且主包体积眼看就要破2M了.怎么解决呢?一般都有模块化开发,小程序必然也有的,那就是今天的主角分包

您能在这里看到啥

创建分包

使用分包

分包与主包的关系

创建分包

分包创建和创建Page基本上是一样的.分为两种创建方式

手动创建
- 创建文件夹,需在根目录下.
  
  比如我们现在创建商城模块mallmodule,如下所示
  
  文件创建完成如下所示
  
  这样mall模块入口创建完成.
- 必须配置app.json,才可以正常使用
  1. 在app.json的文件中,添加subPackages参数.如下所示
```
{
  "pages": [
      "pages/index/index"
  ],
  "subPackages": [
      {
          "root": "mallmodule",
          "pages": [
              "pages/mall/mall"
          ]
      }
  ],
  "window": {},
  "style": "v2",
  "sitemapLocation": "sitemap.json"
  }
```
  - subPackages: 所有分包归属地,你所定义的分包中的界面路径,必须在这里面声明.才可以被其他页面正常调用.
  - root: 分包根目录.切记.必须要和你创建的分包文件夹名字一样哦.不然,系统将认为你创建的是另一个分包,当你保存的时候,系统就默认给你创建了root名字相同的文件夹,所以在开发的时候.一定要注意root的名字
  - pages: 分包页面路径数组.
  - name: 分包别名.分包预下载是可以使用
  - independent: 是否是独立分包
在app.json创建
- 和上面配置app.json一样.只不过这里我不需要手动创建了.把我们想要创建分包和界面路由写好.然后点击保存.即可完成创建.如下所示
  1. 未添加
    - 项目结构 如下所示.
    - app.json如下所示
  2. 已添加
    - 项目结构 如下所示
    - app.json如下所示
经过上面两步,我们来看一下,现在的项目结构

.

├── app.js

├── app.json

├── app.wxss

├── components

├── integralmodule(新增的积分模块)

├── mallmodule(新增的商城)

├── pages

├── project.config.json

├── project.private.config.json

├── sitemap.json

├── test

└── utils

如上所示.这样我们的分包就创建完成了.

切记:你所创建的分包模块一定要在app.json中的subPackages字段里,按上面的模式声明一下.不然在界面跳转的时候,就出触发小程序生命周期中的找不到界面的方法

使用分包

跳转到分包模块中某一个界面

从上面创建分包的讲解中,我们知道分包名字、分包界面路由.这样我们在跳转的时候,只需要root+ page路由既可.

比如我们现在跳转到mallmodule模块下的mall界面.
```
wx.navigateTo({
    url: '/mallmodule/pages/mall/mall',
})
```

分包与主包的关系

注意事项
- 整个小程序所有分包和主包不能超过20M
- 单个分包/主包提价不能超过2M
- tabBar页面必须在主包内.
打包原则
- 声明subpackages后,将按subpackages下配置的路径进行打包.subpackages配置路径外的目录将会被打包到主包中.
- 主包的pages,就是最外层的pages字段.
分包加载顺序
- 启动小程序,不会加载分包.
- 用户第一次进入分包某一个界面时,会把对应分包下载下来.并在完成时,显示对应界面
分包的好处
- 加快小程序首次启动时间
  
  小程序启动时,默认会下载主包并启动主包内页面.所以减少了分包资源的下载,这样也大大的加快了小程序的启动速度
- 独立开发
引用原则
- 主包无法引用分包资源
- 分包不能引用分包资源,使用分包异步化时不受此条件限制.
- 分包可以引用主包资源

Demo

微信小程序学习笔记