评论

小程序进行合理分包加载的一些策略

介绍小程序进行分包加载的一种实践。

如果对分包不了解,请先阅读分包加载 | 微信开放文档,至少需要阅读使用分包独立分包分包预下载三节,此处仅是一种实践,更灵活的用法以官方和具体场景决定。如有错误,恳请指正。

何时需要分包

分包的目的在于加快用户下载小程序包的速度,改善用户体验,此处建议小程序所有页面在20个及以下,可以不用分包,超过则进行分包,并将用户高频访问的页面放在主包配置中;

特殊情况如页面少,但某些页面很重,也需要进行分包,具体结合具体页面数、页面数据大小、用户高频访问的页面等实际因素确定如何分包。

推荐的主包和分包的一种文件组织的目录结构

如下:

├── sub-pages
│   ├── my
│       │   ├── setting
│       │   └── address
│   ├── home
│       │       └── goods-list
│       ├── activity
│     │   └── activity-detail
│   └── contact-info
│               └── contact-qr-code
├── pages
│       ├──base
│   │   ├── login
│   │   └── 404-page
│   ├── home
│   └── my
└── utils

上述解释为:

  • pages中base为基础页面,包含登录、注册、更新用户头像、昵称、404等基础页面;其他目录为tab页面,如下仅有home和my页面;
  • sub-pages目录存放分包,一级目录为tab对应的模块或者其他独立的模块,此处为my、home、activitys;
  • 此处goods-list因页面跳转关系,需要关联activity-detail和my下所有页面,所以在分包的基础上进行关联预下载
  • contanct-info为联系信息,仅通过第三方小程序跳转,作为独立分包的示例;

对应的app.json配置如下

{
  "pages":[
    "pages/home/home",
    "pages/my/my",
    "pages/base/login/login",
    "pages/base/404-page/404-page",
  ],
  "subpackages": [
    {
      "root": "sub-pages/my",
      "pages": [
        "address/address",
        "setting/setting"
      ]
    }, {
      "root": "sub-pages/home",
      "pages": [
        "goods-list/goods-list"
      ]
    },
    {
      "root": "sub-pages/activity",
      "name": "activity-sub",
      "pages": [
        "activity-detail/activity-detail"
      ]
    },
    {
      "root": "sub-pages/contact-info",
      "pages": [
        "contact-qr-code/contact-qr-code",
      ],
      "independent": true
    }
  ],
  "preloadRule": {
    "sub-pages/home/goods-list/goods-list": {
      "network": "all",
      "packages": ["activity-sub","sub-pages/my"]
    }
  }
}

如有错误,恳请指正。

最后一次编辑于  2023-07-17  
点赞 1
收藏
评论
登录 后发表内容