查看项目中包的依赖分析

下面，我们先来查看以前写的一个小程序项目，然后看他的包的情况。

点击详情 - 本地代码 - 代码依赖分析

分包加载的解释

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

分包的理念就是让第一次加载的包（主包）尽可能小，其他的模块，等到他用到的时候再去加载。

目前小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 20M

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

具体操作

下面就来看看分包的具体操作吧

• 将app.json文件pages中需要分包的页面路径删除。

• 通过subpackages属性来配置分包的配置。

• 将pages文件夹中需要分包的页面提取出来单独作为一个分包文件夹，把每个包的依赖都放在自己的文件夹下管理。

// app.json
"subPackages": [
    {
      "root": "detailPackage",
      "pages": [
        "pages/detail-search/index",
        "pages/video-detail/index"
      ]
    }
  ],

分包配置的一些属性含义

独立分包

上面我们的分包只是一次不同的分包。我们分包中的数据还是引用了主包中的，所以这就不是独立分包。

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。

开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。

一个小程序中可以有多个独立分包。其实就是我们平常扫码登录小程序后，直接跳转到我们需要的页面，而不是首页，这就大大优化了启动速度。

如何做到独立分包呢？

只需要配置"independent": true即可。

分包预下载

开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包。

就是当主包的内容下载完毕后，在空余时间下载我们指定的预加载包的资源。

"preloadRule": {
    "pages/home-music/index": {
        "network": "all",
        "packages": ["detailPackage"]
    }
}