小程序分包（Taro分包案例）

最新推荐文章于 2025-09-11 01:45:13 发布

转载最新推荐文章于 2025-09-11 01:45:13 发布 · 2.9k 阅读

8 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/cbea7c48ae28

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨微信小程序分包加载方案，旨在解决2MB代码包限制带来的功能扩展难题。介绍了分包加载原理、如何配置独立分包及预下载机制，助力优化小程序启动速度。

为什么要使用小程序的“分包加载”方案

微信小程序限制了代码包不能超过 2MB，限制大小是对小程序启动速度的考虑，但是2MB 大小严重限制了小程序功能的扩展，业务需求可能需要更大的体积，综合考虑微信推出了“分包加载方案”

分包加载

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

在构建小程序分包项目时，构建会输出一个或多个分包。分包小程序必定含有一个主包，和多个分包。

主包：即放置默认启动页面/TabBar页面，以及一些所有分包都需用到公共资源/JS 脚本；

分包：则是根据开发者的配置进行划分。

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

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

整个小程序所有分包大小不超过 8M
单个分包/主包大小不能超过 2M
对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作

项目中使用分包

1、需要在`Taro->app.jsx` ，或者原生小程序的 `app.json` 的config配置中新增 `subpackages`字段声明项目分包结构

config: Config = {
//  tabBar路径+ 非分包路径
    pages: [   
      'pages/index/index',
      'pages/personal/index',
      "pages/pageC/index",
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
//  tabBar路径
    tabBar:{   
      "list": [{
        "pagePath": "pages/index/index",
        "text": "首页"
      }, {
        "pagePath": "pages/personal/index",
        "text": "个人中心"
      }]
    },
//  分包路径
    subPackages:[
      {
        "root": "pages/pageA/",
        "pages": [
          "index",
          "pageA1",
        ]
      }, {
        "root": "pages/pageB/",
        "pages": [
          "index",
          "pageB",
        ]
      }
    ]

  }


注意：subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包