小程序分包

240 阅读2分钟

开发环境

react:^17.0.0

Taro:v3.2.8

node:v14.15.0

TS:v4.1.0

其它...

项目是基于 Taro 框架创建的 react 项目。

参考文档

Taro 官方文档

微信小程序官方文档

下面自己弄得目录结构,与官方文档有所出入,所以将文档放前面,可以先看看。

开始分包

总的来说,主要分三步修改。

  1. 修改目录结构,不同包对应的文件放不同目录模块下。
  2. app.config.ts文件配置 subpackages 属性。
  3. 修改页面中跳转链接。

下面以举例的方式来说明。假如,项目中有以下一些页面。

  • Home(首页,tabBar1)
  • QRCode(扫一扫,tabBar2)
  • Mine (我的,tabBar3)
  • DeviceList (设备列表页面)
  • DeviceDetail (设备详情页面)
  • 设备相关其它页面...
  • AnimalList (生物列表页面)
  • AnimalDetail(生物详情页面)
  • 生物相关其它页面...
  • 其它页面...

比如说,我们可以将设备相关的页面单独分出一个包,生物相关的页面单独分出一个包。

修改目录结构,不同包对应的文件放不同目录模块下。

分包前:

src/pages
|-Home
|-QrCode
|-Mine
|
|-DeviceList
|-DeviceDetail
|-设备其它相关页面...
|
|-AnimalList
|-AnimalDetail
|-生物其它相关页面...
|
|-其它...

分包后:

src/pages
|-Home
|-QrCode
|-Mine
|
|-moduleDevice
|  |-DeviceList
|  |-DeviceDetail
|  |-其它设备相关页面
|
|-moduleAnimal
|  |-AnimalList
|  |-AnimalDetail
|  |-其它生物相关页面
|
|-其它...

包名可随意命名,但需要注意两点

  • app.config.ts 文件中的配置与这里的包名保持一致。
  • 页面中页面的跳转,也需要跟这里的包名保持一致。

app.config.ts文件配置 subpackages 属性。

分包前:

export default {
  pages: [
    // tabbar - 首页
    'pages/Home/index',
    // tabbar - 扫一扫
    'pages/QrCode/index',
    // tabbar - 个人
    'pages/Mine/index',


    // 生物列表
    'pages/AnimalList/index',
    // 生物详情
    'pages/AnimalDetail/index',

    // 设备列表
    'pages/DeviceList/index',
    // 设备详情
    'pages/DeviceDetail/index',
    
    // 其它页面...
  ],
};

分包后:

export default {
  pages: [
    // tabbar - 首页
    'pages/Home/index',
    // tabbar - 扫一扫
    'pages/QrCode/index',
    // tabbar - 个人
    'pages/Mine/index',

    // 其它页面...
  ],
  subpackages: [
    {
      root: 'pages/moduleAnimal/',
      pages: [
        // 生物列表
        'AnimalList/index',
        // 生物详情
        'AnimalDetail/index',
        // 其它生物相关的页面...
      ],
    },
    {
      root: 'pages/moduleDevice/',
      pages: [
        // 设备列表
        'DeviceList/index',
        // 设备详情
        'DeviceDetail/index',
        // 其它设备相关的页面...
      ],
    },
  ],
};

修改页面中跳转链接。

分包前:

Taro.navigateTo({
  url: '/pages/DeviceList/index',
});

分包后:

Taro.navigateTo({
  url: '/pages/moduleDevice/DeviceList/index',
});

注意事项

以下两个分包原则,直接 Ctrl+C/V 官方文档下的。严格遵循即可。

打包原则

  • 声明 subpackages 后,将按 subpackages 配置路径进行打包,subpackages 配置路径外的目录将被打包到主包中。
  • 主包也可以有自己的 pages,即最外层的 pages 字段。
  • subpackage 的根目录不能是另外一个 subpackage 内的子目录。
  • tabBar 页面必须在主包内。

引用原则

  • packageA 无法 require packageB JS 文件,但可以 require 主包、packageA 内的 JS 文件;使用 分包异步化 时不受此条限制。
  • packageA 无法 import packageB 的 template,但可以 require 主包、packageA 内的 template。
  • packageA 无法使用 packageB 的资源,但可以使用主包、packageA 内的资源。