更新记录

1.0.0（2025-11-02） 下载此版本

更新包体积分析

平台兼容性

uni-app(3.7.6)

其他

wg-pack-analyzer 包体积分析组件，输出可视化报告和建议

📦 插件介绍

wg-pack-analyzer 是一个专为 UniApp 项目设计的包体积分析工具，帮助开发者分析构建产物的文件构成，找出大文件、重复资源和优化点，从而有效优化包体积。

该组件提供两种使用方式：

1. CLI 命令行工具 - 用于分析构建后的 dist 目录并生成 HTML 报告
2. 可视化组件 - 在 UniApp 应用中直接使用组件进行文件分析

🌟 核心功能

• 📊 文件类型分析 - 按文件类型统计包体积构成
• 🏆 Top10 大文件 - 快速识别占用空间最大的文件
• 📁 文件结构展示 - 清晰展示构建产物的文件结构
• 💡 优化建议 - 提供针对性的包体积优化建议
• 📈 可视化图表 - 饼图展示文件类型分布
• 📄 HTML 报告 - 生成详细的分析报告

🚀 安装方式

通过 uni_modules 安装

1. 在 HBuilderX 中导入插件
2. 选择 uni_modules 目录导入

🛠 使用方法

1. CLI 命令行工具

在项目根目录执行以下命令：

# 基本用法
node src/uni_modules/wg-pack-analyzer/bin/wg-pack-analyzer.js dist/build/h5 -o report.html

# 自定义输出路径
node src/uni_modules/wg-pack-analyzer/bin/wg-pack-analyzer.js dist/build/h5 -o my-report.html

2. 在页面中使用组件

在你的 Vue 页面中使用组件：

<template>
    <view>
        <wg-pack-analyzer :enable-optimization="true" />
    </view>
</template>

<script>
// 组件会自动按需引入（需配置 easycom）
export default {
    // ...
};
</script>

3. 组件属性

🎯 适用场景

• UniApp 项目打包体积优化
• 构建产物分析与监控
• 开发阶段的包体积控制
• 项目性能诊断

📈 报告示例

CLI 工具生成的 HTML 报告包含以下内容：

1. 包体积概览 - 总大小、文件类型数、文件总数等
2. 文件类型分布饼图 - 直观展示各类型文件占比
3. Top 10 大文件列表 - 识别最大的文件
4. 文件结构树 - 展示完整的文件目录结构
5. 优化建议 - 根据分析结果提供优化方案

⚙️ 技术特性

• 跨平台兼容 - 支持所有 UniApp 支持的平台
• 轻量级实现 - 无额外依赖，体积小巧
• 响应式设计 - 适配不同屏幕尺寸
• 易于集成 - 符合 UniApp 组件规范
• 模块化设计 - 各功能模块独立，便于维护