UniApp 分包 uni-id-pages 实践

#目录

介绍
目录结构
云服务空间与公共模块处理
关联公共模块
云函数和表上传云服务空间
动态导入uniIdPageInit

#介绍

使用uniapp编译微信小程序的时候，经常会出现vendor.js过大的情况，这时候就需要考虑分包。除了其他第三方插件，uniapp的插件也占用主包很大的空间。

uniapp项目中自己的插件放在uni_modules目录下，但是如果将整个uni_modules作为分包经常会出现问题，因为很多插件在主包中要用到。这里以单独将uni-id-pages分包为例。

#目录结构

如图所示，首先将uni_modules中的uni-id-pages包拿出来，放到新建的一个用来存放分包的目录，我这里是sub-uni。

然后，在pages.json中更新分包声明和页面路径:

pages.json

{
  "subPackages": [
    {
      "root": "sub-uni/uni-id-pages",
      "pages": [
        {
          "path": "pages/register/register",
          "style": {
            "navigationBarTitleText": "注册"
          }
        },
        {
          "path": "pages/login/login-withoutpwd",
          "style": {
            "navigationBarTitleText": "登录"
          }
        },
        {
          "path": "pages/login/login-withpwd",
          "style": {
            "navigationBarTitleText": "账号密码登录"
          }
        },
        {
          "path": "pages/login/login-smscode",
          "style": {
            "navigationBarTitleText": "手机验证码登录"
          }
        },
        {
          "path": "pages/register/register-by-email",
          "style": {
            "navigationBarTitleText": "邮箱验证码注册"
          }
        },
        {
          "path": "pages/retrieve/retrieve",
          "style": {
            "navigationBarTitleText": "重置密码"
          }
        },
        {
          "path": "pages/retrieve/retrieve-by-email",
          "style": {
            "navigationBarTitleText": "通过邮箱重置密码"
          }
        },
        {
          "path": "pages/common/webview/webview",
          "style": {
            "enablePullDownRefresh": false,
            "navigationBarTitleText": ""
          }
        },
        {
          "path": "pages/admin/register",
          "style": {
            "enablePullDownRefresh": false,
            "navigationBarTitleText": "注册管理员账号"
          }
        }
      ]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "packages": ["sub-uni/uni-id-pages"]
    }
  }
}