微信小程序如何进行分包处理?

目录

分包是什么?

为什么要分包?

分包前后结构对比

具体操作步骤

[第 1 步:规划分包结构](#第 1 步:规划分包结构)

[第 2 步:修改 app.json 进行配置](#第 2 步:修改 app.json 进行配置)

[第 3 步:创建分包目录并移动文件](#第 3 步:创建分包目录并移动文件)

[第 4 步:处理组件和工具函数的引用](#第 4 步:处理组件和工具函数的引用)

[第 5 步:重新编译并测试](#第 5 步:重新编译并测试)

进阶概念:独立分包

注意事项

已通过效果:


分包是什么?

一说到这个其实好多人就想骂了,先附上几张图(不忍直视):

小程序分包是指将完整的小程序项目划分成一个主包多个分包

  • 主包 :包含小程序启动所需的核心页面(如首页、TabBar 页面)和所有分包都会用到的公共代码/资源。

  • 分包 :包含某些特定功能下的页面、组件、代码和资源。用户在使用到这些功能时才会下载对应的分包。

为什么要分包?

  1. 突破体积限制 :小程序单个包体积限制为 2MB。使用分包后,整个小程序所有分包的总体积上限可提升至 20MB(微信小程序目前标准)。(目前一个包超过1.5mb就会提示了)

  2. 优化启动速度 :小程序启动时只需下载主包(通常很小),用户点击进入某个分包页面时,才去下载对应的分包代码。这大大降低了首屏加载时间。

  3. 按需加载:只有用户真正访问到某个功能时,才加载对应的代码,节省了用户流量和空间。


分包前后结构对比

举例一个电商小程序,结构如下:

(看完下面这个,我敢说基本上都能懂了,是不是简简单单?哈哈)

分包前(所有内容都在主包):

project-root/
├── app.js
├── app.json
├── app.wxss
├── pages/
│ ├── index/ # 首页 (TabBar)
│ ├── logs/ # 日志页 (TabBar)
│ ├── category/ # 分类页
│ ├── product/ # 商品详情页
│ └── profile/ # 个人中心页
├── components/
│ ├── header/ # 公共头部组件
│ └── toast/ # 公共弹窗组件
└── utils/
└── request.js # 公共网络请求库

分包后(按功能拆分):

project-root/
├── app.js
├── app.json
├── app.wxss
├── pages/ # 【主包】主要页面
│ ├── index/ # 首页 (TabBar,必须放主包)
│ ├── logs/ # 日志页 (TabBar,必须放主包)
│ └── profile/ # 个人中心页
├── components/ # 【主包】公共组件
│ ├── header/
│ └── toast/
├── utils/ # 【主包】公共工具库
│ └── request.js

├── packageA/ # 【分包A】商品模块
│ ├── packageA.json # 分包A的配置文件
│ ├── pages/
│ │ ├── category/ # 分类页
│ │ └── product/ # 商品详情页
│ └── components/ # 分包A专用的组件
│ └── product-card/

└── packageB/ # 【分包B】未来可能扩展的模块
├── packageB.json
└── pages/
└── cart/ # 购物车页

具体操作步骤

第 1 步:规划分包结构

确定哪些页面是启动就必须的(放主包),哪些功能可以独立成模块(放分包)。TabBar 页面必须在主包

第 2 步:修改 app.json 进行配置

app.json 中新增 subpackagessubPackages(两者均可)字段来声明分包。

复制代码
// app.json
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/profile/profile" // 主包页面
  ],
  "subPackages": [
    {
      "root": "packageA", // 分包的根目录名
      "name": "shop", // 分包的别名,用于分包异步化时引用,可省略
      "pages": [ // 分包内的页面路径,相对于 root 根目录
        "pages/category/category",
        "pages/product/product"
      ],
      "independent": false // 是否为独立分包(默认为 false)
    },
    {
      "root": "packageB",
      "pages": [
        "pages/cart/cart"
      ]
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index" // TabBar 页面必须在主包
      },
      {
        "pagePath": "pages/logs/logs" // TabBar 页面必须在主包
      }
    ]
  },
  // ... 其他 window 等配置
}
第 3 步:创建分包目录并移动文件

根据你在 app.json 中的配置,在项目根目录创建分包文件夹(如 packageA),然后将对应的页面、组件、资源文件移动到这个文件夹下。

重要: 移动文件后,一定要修改 app.json 中对应的路径。原来在主包 pages 里声明的分包页面路径要删除

第 4 步:处理组件和工具函数的引用
  • 公共组件/工具(如 utils/request.js :继续放在主包,所有分包都可以直接 requireimport

  • 分包内私有组件/工具:放在分包目录下,只能被该分包内的页面引用。

第 5 步:重新编译并测试

在微信开发者工具中点击编译,检查是否有路径错误。然后通过右上角的"编译模式",选择"添加编译模式",单独测试每一个分包页面,确保能正常加载和显示。

进阶概念:独立分包

独立分包是分包的一种特殊类型,可以独立于主包运行,不需要下载主包。

  • 特点 :通常用于某些广告页、活动页等上下文独立性极强的页面。用户从独立分包页面进入小程序时,不需要下载主包,速度极快。

  • 限制 :独立分包不能引用主包内的任何文件(公共组件、工具库都不行)。

  • 配置 :将 independent 属性设为 true

javascript 复制代码
// app.json
{
  "subPackages": [
    {
      "root": "independentModule",
      "pages": ["pages/promotion/promotion"],
      "independent": true // 声明为独立分包
    }
  ]
}

注意事项

  1. TabBar 页面必须放在主包中,不能在分包中定义。

  2. 公共代码:所有分包都会用到的 JS 库、自定义组件、样式等,尽量放在主包中。

  3. 主包体积 :要时刻关注主包的大小(开发者工具详情页可查看),因为它直接影响启动速度。主包最好控制在 1.5MB 以内,预留一些空间。

  4. 分包之间的跳转

    • 跳转到分包页面:wx.navigateTo({ url: '/packageA/pages/category/category' })

    • url 路径必须以分包根目录 root 开头

  5. 引用原则

    • 分包可以引用自己包内的组件和工具。

    • 分包可以引用主包内的组件和工具。

    • 分包不能引用其他分包内的文件

    • 主包不能引用分包内的文件

  6. 分包预加载:可以使用 preloadRule 配置在进入主包某个页面时,静默预加载可能即将用到的分包,提升后续跳转流畅度。

    javascript 复制代码
    // app.json
    "preloadRule": {
      "pages/index/index": { // 当用户从首页启动时
        "network": "all", // 在任意网络下都预加载
        "packages": ["packageA"] // 预加载 packageA 分包
      }
    }

    已通过效果:

相关推荐
Jolyne_6 小时前
Table自定义单元格渲染分享
前端
加载中3616 小时前
pnpm时代包版本不一致问题还是否存在
前端·面试·npm
老马啊老马6 小时前
30 分钟搞定!Docker+Jenkins+Nginx + 腾讯云实现前端 CI/CD
前端
VillenK6 小时前
用插件的方式注入Vue组件
前端·vue.js
掘金安东尼6 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
跟橙姐学代码7 小时前
Python异常处理:告别程序崩溃,让代码更优雅!
前端·python·ipython
niuhuahua7 小时前
大屏拖拽功能,配合ai组件使用,配合各个组件都可使用
前端
得物技术7 小时前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
陶甜也7 小时前
threeJS 实现开花的效果
前端·vue·blender·threejs