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

---

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

---

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

1. 打开代码分析
   在微信开发者工具中：

   • 点击顶部菜单栏 工具 ➔ 代码分析
   • 选择 代码依赖分析 标签页
   • 查看 分包大小分布图（自动标注超限部分）

2. 上传版本时校验
   提交代码包时，控制台会自动显示分包大小：

   [分包检测]
   主包大小: 1.2MB
   subpackage1: 3.5MB (超过建议值2MB)
   subpackage2: 1.8MB
   

---

方法 2：使用 miniprogram-ci 工具

1. 安装官方 CLI 工具

   npm install -g miniprogram-ci
   

2. 生成详细分析报告

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

   输出示例：

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

---

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

// 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}`);
});

执行命令：

node get-subpackage-size.js

输出：

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

---

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

1. 生成编译产物
   在开发者工具中：

   • 点击 预览 ➔ 勾选 生成sourcemap
   • 产物输出到 miniprogram_dist

2. 手动分析分包结构

   # 查看主包大小
   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怎么办？

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

检查点：

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

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

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

正确做法：

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

---

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

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

注意事项：

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