← 返回首页

分包配置可视化

主包页面
分包
小程序每个分包不超过 2MB,整个小程序所有分包总计不超过 20MB。主包放置 TabBar 页面和公共资源,其他页面尽量放到分包中。

功能亮点

主包页面管理

以标签形式管理主包页面列表,自由添加和删除页面,实时统计页面数量,超限时自动警告。

分包结构可视化

以区块形式展示每个分包的根目录、名称和页面列表,分包结构一目了然,支持灵活增删。

独立分包支持

支持配置独立分包,使分包页面可不依赖主包独立启动,适合分享入口、工具模块等场景。

自动生成 subpackages

根据可视化的分包结构自动生成完整的 subpackages 配置代码,格式规范,可直接粘贴使用。

容量监控提醒

主包页面超限时自动显示警告提示,帮助开发者控制主包大小,合理规划分包策略。

使用步骤

  1. 管理主包页面列表——添加或删除页面路径,主包放置 TabBar 页面和公共资源
  2. 添加分包,填写每个分包的分包根目录和名称(可选)
  3. 为每个分包添加页面路径,将非首页功能模块合理分配到不同分包中
  4. 复制生成的 app.json 分包配置代码到项目中,享受按需加载的提速效果

关于分包配置可视化

微信小程序对单个包的体积限制为 2MB(使用分包后总上限 20MB)。当你的项目体积增长到超过 2MB 时,必须将代码拆分为主包+多个分包——启动时只加载主包,访问分包页面时再按需加载。手写 subpackages 配置涉及路径映射、预加载规则(preloadRule)、独立分包标记等,容易出错。本工具提供可视化界面管理分包结构,将页面分配到不同分包,自动生成符合规范的 subpackages 配置和预加载规则,降低手动配置出错的风险,让分包策略一目了然。

常见问题

什么是独立分包?为什么用独立分包?

普通分包依赖主包(主包先加载,分包才能打开);独立分包(independent)不依赖主包——可以在主包未加载的情况下独立启动(如通过分享卡片直接打开)。适合:小程序中完全独立的功能模块(如小程序内的「工具合集」子应用,用户可能直接通过分享进入)。注意:独立分包不能调用主包的 JS 方法和公共组件(因为主包还没加载),需要自包含。

预加载规则(preloadRule)是什么?

预加载规则让小程序在用户访问主包某个页面时,提前在后台下载某个分包——这样当用户真正跳转到分包页面时,分包已经下载好了,体验更流畅。典型用法:用户进入首页(主包)时预加载「商品详情」分包,因为首页很可能有商品链接被点击。需注意:预加载会消耗流量(WiFi 下通常 2MB/s),不要预加载用户几乎不可能访问的分包。