UniApp Cross Package Analyzer

UniApp 跨包依赖分析 Webpack 插件，可视化分析分包之间的依赖关系，帮助优化小程序包体积。

功能特性

• 基于 pages.json 自动识别主包和分包配置
• 分析所有 Vue/JS 文件的跨包依赖关系
• 提供 Web 可视化界面，包含：
  • 分包视图：按分包查看依赖详情，支持折叠展开
  • 依赖关系图：力导向图展示分包间依赖，带箭头和引用数量
  • 依赖矩阵：热力图直观展示包间依赖强度
  • 完整列表：支持筛选和搜索的依赖列表
• 支持显示/隐藏主包相关依赖
• 控制台输出依赖统计摘要

安装

npm install uniapp-cross-package-analyzer --save-dev

使用方法

Vue CLI 项目 (vue.config.js)

const UniAppCrossPackageAnalyzer = require('uniapp-cross-package-analyzer');

module.exports = {
    configureWebpack: {
        plugins: [
            new UniAppCrossPackageAnalyzer({
                port: 8889,              // Web 服务端口
                openBrowser: true,       // 自动打开浏览器
                analyzerMode: 'server',  // 'server' | 'static' | 'json' | 'disabled'
            })
        ]
    }
};

Webpack 配置

const UniAppCrossPackageAnalyzer = require('uniapp-cross-package-analyzer');

module.exports = {
    plugins: [
        new UniAppCrossPackageAnalyzer({
            port: 8889,
            openBrowser: true,
            analyzerMode: 'server',
        })
    ]
};

配置选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | port | number | 8889 | Web 服务端口 | | openBrowser | boolean | true | 是否自动打开浏览器 | | analyzerMode | string | 'server' | 报告模式：'server' 启动服务、'static' 生成 HTML、'json' 生成 JSON、'disabled' 禁用 | | reportFilename | string | 'cross-package-report.html' | 静态报告文件名 | | statsFilename | string | 'cross-package-stats.json' | JSON 报告文件名 | | pagesJsonPath | string | 'pages.json' | pages.json 相对路径 | | inputDir | string | process.env.UNI_INPUT_DIR 或 'src' | 源码目录 |

按需启用

建议仅在需要分析时启用，避免影响日常开发：

// vue.config.js
const plugins = [];

if (process.env.ANALYZE === 'true') {
    const UniAppCrossPackageAnalyzer = require('uniapp-cross-package-analyzer');
    plugins.push(new UniAppCrossPackageAnalyzer());
}

module.exports = {
    configureWebpack: { plugins }
};

运行：

ANALYZE=true npm run build:mp-weixin

兼容性

• Webpack 4.x / 5.x
• UniApp Vue2 / Vue3
• CLI 创建的项目 / HBuilderX 项目

License

MIT