微信小程序 --- 分包加载

分包加载

1. 什么是分包加载

什么是分包加载 ❓

小程序的代码通常是由许多页面、组件以及资源等组成，随着小程序功能的增加，代码量也会逐渐增加，体积过大就会导致用户打开速度变慢，影响用户的使用体验。

分包加载是一种小程序优化技术。将小程序不同功能的代码，分别打包成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载，在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。每个分包可以包含多个页面、组件、样式和逻辑等。当小程序需要使用某个分包时，才会加载该分包中的代码。

**主包：**包含默认启动页面 / TabBar 页面 以及 所有分包都需用到公共资源的包

**分包：**根据开发者的配置进行划分出来的子包

小程序分包后如何加载

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

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

1. 整个小程序所有分包大小不超过 20MB
2. 单个分包/主包大小不能超过 2MB

📌 注意事项：

​ 整个小程序所有分包大小可能会随时调整，截止到目前整个小程序所有分包大小不超过 20M

2. 分包的基本使用

知识点：

在进行分包加载之前，需要对小程序的业务逻辑进行分析，将代码划分成多个模块。每个模块应该有一个明确的功能，并与其他模块之间有明确的依赖关系

需要按照功能拆分分包，并且每个分包都需要与其他包有依赖关系(可以通过 a 分包跳转到 b 分包)

开发者在小程序的配置文件 app.json 中，通过 subPackages 或者 subpackages字段声明项目分包结构。

每个分包需要指定 root 字段、name 字段和 pages 字段

1. root 字段指定了分包的根目录，该目录下的所有文件都会被打包成一个独立的包
2. name 字段为分包的名称，用于在代码中引用该分包
3. pages 字段指定了该分包中包含的页面，可以使用通配符 * 匹配多个页面

落地代码：

{
   

  "subPackages": [
    {
   
      "root": "modules/goodModule",
      "name": "goodModule",
      "pages": [
        "pages/list/list",
        "pages/detail/detail"
      ]
    },
    {
   
      "root":