小程序分包加载

微信小程序的分包加载功能是一种优化技术，可以显著提升小程序的首次启动速度和性能。本文将详细介绍小程序分包加载的概念、使用方法和注意事项。

什么是分包加载？

分包加载允许开发者将小程序划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。这种方式可以优化小程序首次启动的下载时间，并在多团队共同开发时提供更好的解耦协作。

分包加载的基本概念

主包：包含默认启动页面、TabBar 页面和公共资源/JS 脚本。
分包：根据开发者配置划分的其他包。

小程序启动时会下载主包，而分包则在用户进入相应页面时才会下载。

分包大小限制

整个小程序所有分包大小不超过 30M（服务商代开发的小程序不超过 20M）
单个分包/主包大小不能超过 2M

如何使用分包加载

1. 配置方法

在 app.json 文件中使用 subPackages 字段声明项目分包结构：

{
  "pages": ["pages/index", "pages/logs"],
  "subPackages": [
    {
      "root": "packageA",
      "pages": ["pages/cat", "pages/dog"]
    },
    {
      "root": "packageB",
      "pages": ["pages/apple", "pages/banana"]
    }
  ]
}

2. 打包原则

subPackages 配置路径外的目录将被打包到主包中
主包可以有自己的 pages
subPackages 的根目录不能是另外一个 subPackages 内的子目录
tabBar 页面必须在主包内

3. 引用原则

分包之间不能相互引用 JS 文件和模板
分包可以引用主包的资源

独立分包

独立分包是一种特殊类型的分包，可以独立于主包和其他分包运行。它不需要下载主包即可运行，大大提升了分包页面的启动速度。

配置方法

在 app.json 的 subpackages 字段中，使用 independent 字段声明独立分包：

{
  "subpackages": [
    {
      "root": "moduleB",
      "pages": ["pages/pear", "pages/pineapple"],
      "independent": true
    }
  ]
}

注意事项

独立分包中不能依赖主包和其他分包的内容
主包中的 app.wxss 对独立分包无效
App 只能在主包内定义
独立分包中暂不支持使用插件

分包预下载

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

配置方法

在 app.json 中添加 preloadRule 配置：

{
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    }
  }
}

分包异步化

分包异步化允许跨分包使用自定义组件或进行 require，通过配置和新接口实现。

跨分包自定义组件引用

使用 componentPlaceholder 配置占位组件：

{
  "componentPlaceholder": {
    "button": "view",
    "list": "simple-list"
  }
}

跨分包 JS 代码引用

使用异步 require 方法：

require
  .async('../commonPackage/index.js')
  .then((pkg) => {
    pkg.getPackageName() // 'common'
  })
  .catch(({ mod, errMsg }) => {
    console.error(`path: ${mod}, ${errMsg}`)
  })