小程序分包加载实战：主包瘦身与subpackage性能优化

微信小程序主包超过2MB无法上传，超过1.5MB下载速度明显劣化，分包加载（subpackage）是绕不开的方案。把非首屏业务拆进独立分包，主包只留tabBar页面和公共组件，整包下载时间可以压缩60%以上。分包的关键在于拆分边界设计、预下载时机和跨包引用约束，三件事处理不好，分包后反而出现页面跳转白屏加长的问题。

分包结构与app.json配置

常规电商类小程序的拆分思路：主包放首页、tabBar三个页面加公共资源；订单、营销活动、会员中心各自独立分包。app.json配置：

{
  "pages": [
    "pages/index/index",
    "pages/cart/cart",
    "pages/user/user"
  ],
  "subpackages": [
    {
      "root": "packageOrder",
      "pages": ["pages/list/index", "pages/detail/index"]
    },
    {
      "root": "packageActivity",
      "name": "act",
      "pages": ["pages/seckill/index"]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["packageOrder"]
    },
    "pages/cart/cart": {
      "network": "wifi",
      "packages": ["act"]
    }
  }
}

root是分包根目录，name用于预下载引用。preloadRule配置进入主包页面时提前拉取哪个分包：首页预下载订单包，用户点订单列表时本地已就绪，跳转接近秒开；活动包比较大且非刚需，限制wifi环境预下载，避免消耗用户流量引发投诉。总包上限20MB，单个分包2MB，主包加独立分包之和不能超30MB，规划目录时先按业务模块算体积再动手拆。

分包大小分析与懒加载策略

拆包前先量化。微信开发者工具的代码依赖分析面板列出每个页面的体积占比，常见体积大户是图片和工具类库。图片处理原则：超过50KB的静态图全部传CDN，代码包内只留tabBar图标和小icon；用到的npm包做按需引入，dayjs完整包含大量locale文件，引入时锁定zh-cn：

// 报错写法：整包引入
import dayjs from 'dayjs';

// 按需：只打包中文locale
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

组件懒加载配合分包使用：分包内页面引用的自定义组件默认随分包加载，主包公共组件通过分包异步化跨包引用，避免重复打包。分包异步化配置后，主包的comp只在用到时才注入：

// 分包内页面异步引用主包组件
{
  "usingComponents": {
    "heavy-comp": "../../components/heavy-comp"
  }
}

app.json加lazyCodeLoading: “requiredComponents”后，未引用的组件代码和注入逻辑不进启动流程，启动耗时普遍下降200到400ms，这是官方文档明确标注的低成本优化项。

跳转路径与跨分包通信处理

分包后最容易踩的坑是路径写死。wx.navigateTo的url带root前缀，跳转分包页面必须写全：

// 跳转分包页面，path = root + pages路径
wx.navigateTo({ url: '/packageOrder/pages/list/index?id=1' });

// 校验分包是否就绪，避免用户点太快白屏
const sub = require.async('../packageActivity/pages/seckill/index')
  .catch(() => {
    wx.showToast({ title: '资源加载中', icon: 'loading' });
  });

跨分包JS引用默认禁止，require.async是官方提供的异步突破手段，调用前目标分包必须已下载。通信场景用全局状态代替直接import：getApp().globalData挂共享数据，或事件总线on/off解耦，分包间不产生静态依赖。tabBar页面必须留在主包，分包页面不能配置tab，这是审核层面的硬性规则，规划页面归属时先确认入口形态再定包。

分包下载耗时监控与调优验证

优化效果用数据验证。上线前开发者工具真机调试看分包下载耗时；上线后在onLaunch上报启动性能：

App({
  onLaunch() {
    const t = wx.getLaunchOptionsSync();
    wx.reportAnalytics('launch_pkg', {
      scene: t.scene,
      duration: wx.getPerformance ? this.calc() : 0
    });
  }
});

自定义analysis后台按机型分组看分包下载耗时分布，低端安卓机是重灾区。分包预下载命中率是核心指标：命中时跳转耗时接近0，未命中则要现场下载，4G网络下一个500KB分包需要500ms以上。命中率低于60%说明preloadRule时机配错，按真实用户路径调整预下载触发页面——分析用户从哪个页面进入分包的占比最高，把预下载配置挪过去，比单纯扩大预下载范围更有效。