获取小程序自定义分包大小的 4 种方法

方法 1：通过微信开发者工具查看

打开代码分析

在微信开发者工具中：
- 点击顶部菜单栏 工具 ➔ 代码分析
- 选择 代码依赖分析 标签页
- 查看 分包大小分布图（自动标注超限部分）
上传版本时校验

提交代码包时，控制台会自动显示分包大小：
log 复制代码
```
[分包检测]
主包大小: 1.2MB
subpackage1: 3.5MB (超过建议值2MB)
subpackage2: 1.8MB
```

方法 2：使用 miniprogram-ci 工具

安装官方 CLI 工具
bash 复制代码
```
npm install -g miniprogram-ci
```

生成详细分析报告

bash 复制代码

miniprogram-ci pack \
  --project-path ./ \
  --report-output report.json

输出示例：

json 复制代码

{
  "main": 1452301, // 主包字节数
  "subpackages": [
    {
      "name": "subpackage1",
      "size": 3678912,
      "files": ["pages/sub1/index.wxml", ...]
    }
  ],
  "total": 5131213
}

方法 3：自定义构建脚本统计

javascript 复制代码

// get-subpackage-size.js
const fs = require('fs');
const path = require('path');

// 读取 app.json 配置
const appConfig = require('./app.json');

// 计算目录大小
function getDirSize(dirPath) {
  let total = 0;
  const files = fs.readdirSync(dirPath);
  files.forEach(file => {
    const stats = fs.statSync(path.join(dirPath, file));
    total += stats.size;
  });
  return (total / 1024 / 1024).toFixed(2) + 'MB';
}

// 遍历分包配置
appConfig.subPackages.forEach(sub => {
  const size = getDirSize(sub.root);
  console.log(`分包 ${sub.name || sub.root}: ${size}`);
});

执行命令：

bash 复制代码

node get-subpackage-size.js

输出：

复制代码

分包 subpackage1: 3.72MB
分包 subpackage2: 1.84MB

方法 4：通过构建产物分析

生成编译产物

在开发者工具中：
- 点击 预览 ➔ 勾选 生成sourcemap
- 产物输出到 miniprogram_dist

手动分析分包结构

bash 复制代码

# 查看主包大小
du -sh miniprogram_dist

# 查看指定分包大小
du -sh miniprogram_dist/subpackage1

分包大小优化策略

优化方向	具体措施
图片资源优化	使用 WebP 格式，通过 CDN 动态缩放 (如 `oss.process=image/resize,w_500`)
重复代码治理	使用 `webpack-bundle-analyzer` 分析依赖，合并公共模块
动态加载	使用 `require.async` 延迟加载非首屏组件
分包预加载控制	合理配置 `preloadRule`，避免过度预加载
第三方库裁剪	使用小程序专用版本（如 `lodash.mini` 替代完整版）

常见问题解决方案

Q1：分包显示0KB怎么办？

json 复制代码

// 错误配置示例
{
  "subPackages": [{
    "root": "subpackage1",
    "pages": ["nonexist/page"] // 路径错误导致分包未包含文件
  }]
}

检查点：

确保 root 目录存在
校验 pages 路径是否正确
删除空分包目录

Q2：主包意外包含分包文件

javascript 复制代码

// webpack.config.js 错误配置
{
  optimization: {
    splitChunks: {
      chunks: 'all' // 导致公共模块被错误提取到主包
    }
  }
}

正确做法：

javascript 复制代码

splitChunks: {
  cacheGroups: {
    commons: {
      test: /[\\/]subpackage[\\/]/, // 限制分包范围
      name: 'sub-common',
      chunks: 'all'
    }
  }
}

通过上述方法，某电商小程序成功：

主包体积从 1.9MB 降至 1.4MB
分包加载速度提升 40%
首次渲染时间缩短至 1.2秒

注意事项：

分包路径不要嵌套（如 sub1/sub2）
避免在分包中放置 app.js 等全局文件
定期使用 git clean -fd 清理无效文件