分包加载

---

背景

微信官方出于小程序的启动速度的考虑，对代码包的大小进行了限制。但是同样也限制了小程序功能的扩展，为了解决这个矛盾，微信官方提供了分包加载这个功能

---

分包加载的介绍

大部分小程序都会由某几个功能组成，通常这几个功能之间是独立的，但会依赖一些公共的逻辑，并且这些功能通常会对应某几个独立的页面。那么小程序代码的打包，大可不必一定要打成一个，可以按照功能的划分，拆分成几个分包，当需要用到某个功能时，才加载这个功能对应的分包。

对于用户来说，小程序加载流程变成了：

首次启动时，先下载小程序主包，显示主包内的页面；

如果用户进入了某个分包的页面，再下载这个对应分包，下载完毕后，显示分包的页面。

采用分包加载，对开发者而言，能使小程序有更大的代码体积，承载更多的功能与服务；而对用户而言，可以更快地打开小程序，同时在不影响启动速度前提下使用更多功能。

---

分包的划分

在配置前首先需要开发者规划下各个分包需要容纳的内容，我们建议开发者按照功能划分的的原则，将同一个功能下的页面和逻辑放置于同一个目录下，对于一些跨功能之间公共逻辑，将其放置于主包下，这样可以确保在分包引用这部分功能时，这部分的逻辑一定存在。

在分包划分时，应该注意以下事项：

避免分包与分包之间引用上的耦合。因为分包的加载是由用户操作触发的，并不能确保某分包加载时，另外一个分包就一定存在，这个时候可能会导致 JS 逻辑异常的情况，例如报「"xxx.js" is not defined」这样的错误；

一些公共用到的自定义组件，需要放在主包内。

---

在同一文件夹下

 {

   "pages":[

    "pages/index",

    "pages/logs"

  ],

  "subPackages": [

    {

      "root": "packageA",

      "pages": [

        "pages/cat",

        "pages/dog"

      ]

    }, {

      "root": "packageB",

      "pages": [

        "pages/apple",

        "pages/banana"

      ]

    }

  ]

}

---

在不同文件夹下

{

  "pages":[

    "pages/index",

    "pages/logs"

  ],

  "subPackages": [

    {

      "root": "packageA",

      "pages": [

        "pages/packageA/cat",

        "pages/packageA/dog"

      ]

    }, {

      "root": "packageB",

      "pages": [

        "pages/packageB/apple",

        "pages/packageB/banana"

      ]

    }

  ]

}