分包配置可视化
功能亮点
主包页面管理
以标签形式管理主包页面列表,自由添加和删除页面,实时统计页面数量,超限时自动警告。
分包结构可视化
以区块形式展示每个分包的根目录、名称和页面列表,分包结构一目了然,支持灵活增删。
独立分包支持
支持配置独立分包,使分包页面可不依赖主包独立启动,适合分享入口、工具模块等场景。
自动生成 subpackages
根据可视化的分包结构自动生成完整的 subpackages 配置代码,格式规范,可直接粘贴使用。
容量监控提醒
主包页面超限时自动显示警告提示,帮助开发者控制主包大小,合理规划分包策略。
使用步骤
- 管理主包页面列表——添加或删除页面路径,主包放置 TabBar 页面和公共资源
- 添加分包,填写每个分包的分包根目录和名称(可选)
- 为每个分包添加页面路径,将非首页功能模块合理分配到不同分包中
- 复制生成的 app.json 分包配置代码到项目中,享受按需加载的提速效果
关于分包配置可视化
微信小程序对单个包的体积限制为 2MB(使用分包后总上限 20MB)。当你的项目体积增长到超过 2MB 时,必须将代码拆分为主包+多个分包——启动时只加载主包,访问分包页面时再按需加载。手写 subpackages 配置涉及路径映射、预加载规则(preloadRule)、独立分包标记等,容易出错。本工具提供可视化界面管理分包结构,将页面分配到不同分包,自动生成符合规范的 subpackages 配置和预加载规则,降低手动配置出错的风险,让分包策略一目了然。
常见问题
- 什么是独立分包?为什么用独立分包?
普通分包依赖主包(主包先加载,分包才能打开);独立分包(independent)不依赖主包——可以在主包未加载的情况下独立启动(如通过分享卡片直接打开)。适合:小程序中完全独立的功能模块(如小程序内的「工具合集」子应用,用户可能直接通过分享进入)。注意:独立分包不能调用主包的 JS 方法和公共组件(因为主包还没加载),需要自包含。
- 预加载规则(preloadRule)是什么?
预加载规则让小程序在用户访问主包某个页面时,提前在后台下载某个分包——这样当用户真正跳转到分包页面时,分包已经下载好了,体验更流畅。典型用法:用户进入首页(主包)时预加载「商品详情」分包,因为首页很可能有商品链接被点击。需注意:预加载会消耗流量(WiFi 下通常 2MB/s),不要预加载用户几乎不可能访问的分包。