uni-app(小程序) 代码分包加载

概念:

1.了解分包的概念和好处

什么是分包

        分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载

分包的好处

        - 可以优化小程序首次启动的下载时间

        - 在多团队共同开发时可以更好的解耦协作

2.分包前后项目的构成

分包前项目的构成

分包前,小程序项目中 所有的页面 和 资源 都被打包到了一起,导致整个项目体积过大,影响小程序首次启动的下载时间

分包后项目的构成

分包后,小程序项目由1个主包 + 多个分包 组成:

        - 主包: 一般只包含项目的启动页面 或 TabBar 页面,以及所有分包都需要用到一些公共资源

        - 分包: 只包含和当前分包有关的页面和私有资源

 3.分包的加载规则

在小程序启动时,默认会下载主包并启动主包内页面

当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示

        - 非 tabBar 页面可以按照功能的不同,划分为不同的分包之后,进行按需下载

4.分包的体积限制

目前,小程序分包的大小有以下两个限制:

        - 整个小程序所有分包大小不超过20M (主包 + 所有分包)

        -单个分包/主包大小不能超过2M

5.分包的配置

小程序的目录结构

在app.json的subPackages节点中声明分包的结构:

  "pages"[  // 主包的所有页面
    "pages/index",
    "pages/logs"
  ]
  "subPackages":[  // 通过subPackages节点,声明分包的结构
    {
      "root":"packageA",  // 第一个分包的根目录
      "pages":[  // 当前分包下,所有页面的相对存放路径
        "pages/cat",
        "pages/dog"
      ]
    },
    {
      "root":"packageB",  // 第一个分包的根目录
      "name":"page2"  // 分包的别名
      "pages":[  // 当前分包下,所有页面的相对存放路径
        "pages/apple",
        "pages/banana"
      ]
    }
  ]

最后小程序目录结构会自动生成packageA和packageB文件夹

 6.查看代码包

        - 可以从目录中查看

        - 也可以点击详情   ->  基本信息 -> 代码依赖分析