uniapp-cross-package-analyzer 1.0.0

package/README.md

@@ -0,0 +1,102 @@
+# UniApp Cross Package Analyzer
+
+UniApp 跨包依赖分析 Webpack 插件，可视化分析分包之间的依赖关系，帮助优化小程序包体积。
+
+## 功能特性
+
+- 基于 `pages.json` 自动识别主包和分包配置
+- 分析所有 Vue/JS 文件的跨包依赖关系
+- 提供 Web 可视化界面，包含：
+  - 分包视图：按分包查看依赖详情，支持折叠展开
+  - 依赖关系图：力导向图展示分包间依赖，带箭头和引用数量
+  - 依赖矩阵：热力图直观展示包间依赖强度
+  - 完整列表：支持筛选和搜索的依赖列表
+- 支持显示/隐藏主包相关依赖
+- 控制台输出依赖统计摘要
+
+## 安装
+
+```bash
+npm install uniapp-cross-package-analyzer --save-dev
+```
+
+## 使用方法
+
+### Vue CLI 项目 (vue.config.js)
+
+```javascript
+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 配置
+
+```javascript
+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' | 源码目录 |
+
+## 按需启用
+
+建议仅在需要分析时启用，避免影响日常开发：
+
+```javascript
+// 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 }
+};
+```
+
+运行：
+```bash
+ANALYZE=true npm run build:mp-weixin
+```
+
+## 兼容性
+
+- Webpack 4.x / 5.x
+- UniApp Vue2 / Vue3
+- CLI 创建的项目 / HBuilderX 项目
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "uniapp-cross-package-analyzer",
+  "version": "1.0.0",
+  "description": "UniApp 跨包依赖分析 Webpack 插件，可视化分析分包之间的依赖关系",
+  "main": "src/index.js",
+  "keywords": [
+    "uniapp",
+    "webpack",
+    "plugin",
+    "analyzer",
+    "subpackage",
+    "dependency",
+    "miniprogram",
+    "小程序",
+    "分包",
+    "依赖分析"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bugs": {
+    "url": ""
+  },
+  "homepage": "",
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "peerDependencies": {
+    "webpack": "^4.0.0 || ^5.0.0"
+  },
+  "dependencies": {
+    "json5": "^2.2.3",
+    "open": "^8.4.0"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ]
+}

package/src/index.js

@@ -0,0 +1,421 @@
+/**
+ * UniApp Cross Package Dependency Analyzer
+ * 
+ * 分析 UniApp 项目中各分包之间的跨包依赖关系
+ * 提供类似 BundleAnalyzerPlugin 的 Web 可视化界面
+ * 
+ * @author 
+ * @license MIT
+ */
+const fs = require('fs');
+const path = require('path');
+const json5 = require('json5');
+const http = require('http');
+
+class UniAppCrossPackageAnalyzer {
+    constructor(options = {}) {
+        // 配置项
+        this.port = options.port || 8889;
+        this.openBrowser = options.openBrowser !== false;
+        this.analyzerMode = options.analyzerMode || 'server'; // 'server' | 'static' | 'json' | 'disabled'
+        this.reportFilename = options.reportFilename || 'cross-package-report.html';
+        this.statsFilename = options.statsFilename || 'cross-package-stats.json';
+        this.pagesJsonPath = options.pagesJsonPath || 'pages.json'; // 相对于 inputDir
+        this.inputDir = options.inputDir || process.env.UNI_INPUT_DIR || 'src';
+        
+        // 内部状态
+        this.subPackageRoots = [];
+        this.mainPackagePrefixes = [];
+        this.dependencyGraph = {
+            nodes: [],
+            links: [],
+            packages: {},
+            crossDeps: [],
+            packageDeps: {}
+        };
+    }
+
+    cleanPath(filePath) {
+        if (!filePath) return filePath;
+        let cleaned = filePath.split('?')[0];
+        try { cleaned = decodeURIComponent(cleaned); } catch (e) {}
+        return cleaned;
+    }
+
+    extractPrefix(pagePath) {
+        const parts = pagePath.split('/');
+        if (parts.length >= 2) {
+            if (parts[0] === 'shares' && parts.length >= 2) {
+                return `${parts[0]}/${parts[1]}/`;
+            }
+            return `${parts[0]}/`;
+        }
+        return pagePath;
+    }
+
+    apply(compiler) {
+        const inputPath = this.inputDir.startsWith('/') ? this.inputDir : 
+            path.resolve(compiler.context || process.cwd(), this.inputDir);
+
+        // 读取 pages.json 配置
+        try {
+            const pagesJsonFullPath = path.join(inputPath, this.pagesJsonPath);
+            const pagesJson = json5.parse(fs.readFileSync(pagesJsonFullPath, 'utf8'));
+            
+            this.subPackageRoots = (pagesJson.subPackages || []).map(pkg => pkg.root);
+            
+            const prefixSet = new Set();
+            (pagesJson.pages || []).forEach(p => {
+                const prefix = this.extractPrefix(p.path);
+                prefixSet.add(prefix);
+            });
+            this.mainPackagePrefixes = Array.from(prefixSet);
+            
+            // 初始化主包
+            this.dependencyGraph.packages['main'] = {
+                name: '主包',
+                root: 'main',
+                files: [],
+                size: 0
+            };
+            this.dependencyGraph.packageDeps['main'] = {
+                imports: [],
+                importedBy: []
+            };
+            
+            // 初始化分包
+            this.subPackageRoots.forEach(root => {
+                this.dependencyGraph.packages[root] = {
+                    name: root,
+                    root: root,
+                    files: [],
+                    size: 0
+                };
+                this.dependencyGraph.packageDeps[root] = {
+                    imports: [],
+                    importedBy: []
+                };
+            });
+            
+        } catch (e) {
+            console.warn('[UniAppCrossPackageAnalyzer] 无法读取 pages.json:', e.message);
+            return;
+        }
+
+        if (this.subPackageRoots.length === 0) {
+            console.warn('[UniAppCrossPackageAnalyzer] 未检测到分包配置');
+            return;
+        }
+
+        // 分析模块依赖
+        compiler.hooks.compilation.tap('UniAppCrossPackageAnalyzer', (compilation) => {
+            compilation.hooks.finishModules.tap('UniAppCrossPackageAnalyzer', (modules) => {
+                this.analyzeModules(modules, inputPath);
+            });
+        });
+
+        // 构建完成后生成报告
+        compiler.hooks.done.tap('UniAppCrossPackageAnalyzer', (stats) => {
+            this.generateReport(stats, compiler.outputPath);
+        });
+    }
+
+    analyzeModules(modules, inputPath) {
+        const nodeMap = new Map();
+        const linkSet = new Set();
+        
+        // 第一遍：收集所有模块
+        for (const module of modules) {
+            if (!module.resource || !module.resource.includes(inputPath)) continue;
+            
+            const rawPath = module.resource.replace(inputPath, '').replace(/\\/g, '/');
+            const modulePath = this.cleanPath(rawPath);
+            
+            if (modulePath.includes('node_modules')) continue;
+            
+            const packageName = this.getPackageName(modulePath);
+            const size = this.getModuleSize(module);
+            
+            const node = {
+                id: modulePath,
+                name: path.basename(modulePath),
+                path: modulePath,
+                package: packageName,
+                size: size,
+                imports: [],
+                importedBy: []
+            };
+            
+            nodeMap.set(modulePath, node);
+            
+            if (this.dependencyGraph.packages[packageName]) {
+                this.dependencyGraph.packages[packageName].files.push(modulePath);
+                this.dependencyGraph.packages[packageName].size += size;
+            }
+        }
+        
+        // 第二遍：分析依赖关系
+        for (const module of modules) {
+            if (!module.resource || !module.resource.includes(inputPath)) continue;
+            
+            const rawPath = module.resource.replace(inputPath, '').replace(/\\/g, '/');
+            const sourcePath = this.cleanPath(rawPath);
+            
+            if (sourcePath.includes('node_modules')) continue;
+            
+            const sourceNode = nodeMap.get(sourcePath);
+            if (!sourceNode) continue;
+            
+            if (module.dependencies) {
+                for (const dep of module.dependencies) {
+                    const depModule = dep.module || dep._module;
+                    if (!depModule || !depModule.resource) continue;
+                    
+                    const rawDepPath = depModule.resource.replace(inputPath, '').replace(/\\/g, '/');
+                    const targetPath = this.cleanPath(rawDepPath);
+                    
+                    if (targetPath.includes('node_modules')) continue;
+                    
+                    const targetNode = nodeMap.get(targetPath);
+                    if (!targetNode) continue;
+                    
+                    sourceNode.imports.push(targetPath);
+                    targetNode.importedBy.push(sourcePath);
+                    
+                    const sourcePackage = this.getPackageName(sourcePath);
+                    const targetPackage = this.getPackageName(targetPath);
+                    
+                    // 跨包依赖检测
+                    if (sourcePackage !== targetPackage) {
+                        const linkKey = `${sourcePath}|${targetPath}`;
+                        if (!linkSet.has(linkKey)) {
+                            linkSet.add(linkKey);
+                            
+                            const location = this.getImportLocation(dep);
+                            const depInfo = {
+                                source: sourcePath,
+                                target: targetPath,
+                                sourcePackage: sourcePackage,
+                                targetPackage: targetPackage,
+                                size: targetNode.size,
+                                location: location,
+                                request: dep.request || dep.userRequest || targetPath
+                            };
+                            
+                            this.dependencyGraph.crossDeps.push(depInfo);
+                            this.dependencyGraph.links.push({
+                                source: sourcePath,
+                                target: targetPath,
+                                sourcePackage: sourcePackage,
+                                targetPackage: targetPackage,
+                                value: targetNode.size
+                            });
+                            
+                            if (this.dependencyGraph.packageDeps[sourcePackage]) {
+                                this.dependencyGraph.packageDeps[sourcePackage].imports.push(depInfo);
+                            }
+                            if (this.dependencyGraph.packageDeps[targetPackage]) {
+                                this.dependencyGraph.packageDeps[targetPackage].importedBy.push(depInfo);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        
+        this.dependencyGraph.nodes = Array.from(nodeMap.values());
+    }
+
+    getPackageName(modulePath) {
+        const normalizedPath = modulePath.replace(/^\//, '');
+        for (const root of this.subPackageRoots) {
+            if (normalizedPath.startsWith(root + '/') || normalizedPath === root) {
+                return root;
+            }
+        }
+        return 'main';
+    }
+
+    getModuleSize(module) {
+        try {
+            if (typeof module.size === 'function') return module.size();
+            if (module._source && module._source._value) {
+                return Buffer.byteLength(module._source._value, 'utf8');
+            }
+            if (module.originalSource) {
+                const source = module.originalSource();
+                if (source && source.source) {
+                    return Buffer.byteLength(source.source(), 'utf8');
+                }
+            }
+        } catch (e) {}
+        return 0;
+    }
+
+    getImportLocation(dep) {
+        let line = '?', column = '?';
+        if (dep.loc) {
+            if (dep.loc.start) {
+                line = dep.loc.start.line;
+                column = dep.loc.start.column;
+            } else if (typeof dep.loc.line === 'number') {
+                line = dep.loc.line;
+                column = dep.loc.column || 0;
+            }
+        }
+        return { line, column };
+    }
+
+    formatSize(bytes) {
+        if (bytes === 0) return '0 B';
+        if (bytes < 1024) return bytes + ' B';
+        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
+        return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
+    }
+
+    generateReport(stats, outputPath) {
+        this.printSummary();
+        
+        if (this.analyzerMode === 'disabled') return;
+        
+        const reportData = this.prepareReportData();
+        
+        if (this.analyzerMode === 'json') {
+            const jsonPath = path.join(outputPath, this.statsFilename);
+            fs.writeFileSync(jsonPath, JSON.stringify(reportData, null, 2));
+            console.log(`[UniAppCrossPackageAnalyzer] JSON 报告已生成: ${jsonPath}`);
+            return;
+        }
+        
+        const html = this.generateHTML(reportData);
+        
+        if (this.analyzerMode === 'static') {
+            const htmlPath = path.join(outputPath, this.reportFilename);
+            fs.writeFileSync(htmlPath, html);
+            console.log(`[UniAppCrossPackageAnalyzer] HTML 报告已生成: ${htmlPath}`);
+            return;
+        }
+        
+        this.startServer(html);
+    }
+
+    prepareReportData() {
+        const crossDepsByPackage = {};
+        
+        for (const dep of this.dependencyGraph.crossDeps) {
+            const key = `${dep.sourcePackage} -> ${dep.targetPackage}`;
+            if (!crossDepsByPackage[key]) {
+                crossDepsByPackage[key] = {
+                    sourcePackage: dep.sourcePackage,
+                    targetPackage: dep.targetPackage,
+                    count: 0,
+                    totalSize: 0,
+                    deps: []
+                };
+            }
+            crossDepsByPackage[key].count++;
+            crossDepsByPackage[key].totalSize += dep.size;
+            crossDepsByPackage[key].deps.push(dep);
+        }
+        
+        const allPackages = Object.keys(this.dependencyGraph.packages);
+        const subPackageOnly = allPackages.filter(p => p !== 'main');
+        
+        return {
+            packages: this.dependencyGraph.packages,
+            allPackages: allPackages,
+            subPackages: subPackageOnly,
+            packageDeps: this.dependencyGraph.packageDeps,
+            crossDeps: this.dependencyGraph.crossDeps,
+            crossDepsByPackage: Object.values(crossDepsByPackage),
+            links: this.dependencyGraph.links,
+            nodes: this.dependencyGraph.nodes,
+            summary: {
+                totalPackages: allPackages.length,
+                totalSubPackages: subPackageOnly.length,
+                totalCrossDeps: this.dependencyGraph.crossDeps.length,
+                totalCrossDepSize: this.dependencyGraph.crossDeps.reduce((sum, d) => sum + d.size, 0)
+            }
+        };
+    }
+
+    printSummary() {
+        console.log('\n' + '='.repeat(80));
+        console.log('[UniAppCrossPackageAnalyzer] 跨包依赖分析结果');
+        console.log('='.repeat(80));
+        
+        const crossDeps = this.dependencyGraph.crossDeps;
+        
+        if (crossDeps.length === 0) {
+            console.log('未检测到跨包依赖');
+            console.log('='.repeat(80) + '\n');
+            return;
+        }
+        
+        const groupedByRoute = {};
+        for (const dep of crossDeps) {
+            const key = `${dep.sourcePackage} -> ${dep.targetPackage}`;
+            if (!groupedByRoute[key]) {
+                groupedByRoute[key] = { count: 0, size: 0, files: new Set() };
+            }
+            groupedByRoute[key].count++;
+            groupedByRoute[key].size += dep.size;
+            groupedByRoute[key].files.add(dep.target);
+        }
+        
+        const totalSize = crossDeps.reduce((sum, d) => sum + d.size, 0);
+        
+        console.log(`共检测到 ${crossDeps.length} 处跨包依赖`);
+        console.log(`预估影响体积: ${this.formatSize(totalSize)}\n`);
+        
+        console.log('--- 跨包依赖路径统计 ---');
+        const sortedRoutes = Object.entries(groupedByRoute)
+            .sort((a, b) => b[1].size - a[1].size);
+        
+        for (const [route, stats] of sortedRoutes) {
+            console.log(`  ${route}: ${stats.count} 处引用, ${stats.files.size} 个文件, ${this.formatSize(stats.size)}`);
+        }
+        
+        console.log('\n' + '='.repeat(80) + '\n');
+    }
+
+    startServer(html) {
+        const server = http.createServer((req, res) => {
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(html);
+        });
+        
+        server.listen(this.port, () => {
+            const url = `http://localhost:${this.port}`;
+            console.log(`[UniAppCrossPackageAnalyzer] 可视化报告服务已启动: ${url}`);
+            
+            if (this.openBrowser) {
+                try {
+                    const open = require('open');
+                    open(url).catch(() => {
+                        console.log(`请手动打开浏览器访问: ${url}`);
+                    });
+                } catch (e) {
+                    console.log(`请手动打开浏览器访问: ${url}`);
+                }
+            }
+        });
+        
+        server.on('error', (err) => {
+            if (err.code === 'EADDRINUSE') {
+                console.log(`[UniAppCrossPackageAnalyzer] 端口 ${this.port} 已被占用，尝试端口 ${this.port + 1}`);
+                this.port++;
+                this.startServer(html);
+            }
+        });
+    }
+
+
+    generateHTML(data) {
+        const htmlTemplate = require('./template');
+        return htmlTemplate(data, this.formatSize.bind(this));
+    }
+}
+
+module.exports = UniAppCrossPackageAnalyzer;
+module.exports.UniAppCrossPackageAnalyzer = UniAppCrossPackageAnalyzer;

package/src/template.js

@@ -0,0 +1,436 @@
+/**
+ * HTML 报告模板
+ */
+module.exports = function generateHTML(data, formatSize) {
+    return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UniApp 分包跨包依赖分析</title>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #eee; min-height: 100vh; }
+        .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px 30px; }
+        .header h1 { font-size: 24px; font-weight: 600; }
+        .header p { opacity: 0.9; margin-top: 5px; font-size: 14px; }
+        .container { padding: 20px 30px; }
+        .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
+        .summary-card { background: linear-gradient(145deg, #16213e, #1a1a2e); border-radius: 12px; padding: 20px; border: 1px solid #333; }
+        .summary-card .label { color: #888; font-size: 13px; margin-bottom: 8px; }
+        .summary-card .value { font-size: 28px; font-weight: 700; color: #667eea; }
+        .tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; flex-wrap: wrap; }
+        .tab { padding: 10px 20px; background: transparent; border: none; color: #888; cursor: pointer; font-size: 14px; border-radius: 8px; transition: all 0.3s; }
+        .tab:hover { background: #333; color: #fff; }
+        .tab.active { background: #667eea; color: #fff; }
+        .panel { display: none; }
+        .panel.active { display: block; }
+        .chart-container { background: #16213e; border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid #333; }
+        .chart { height: 500px; }
+        .table-container { background: #16213e; border-radius: 12px; overflow: hidden; border: 1px solid #333; max-height: 600px; overflow-y: auto; }
+        table { width: 100%; border-collapse: collapse; }
+        th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #333; }
+        th { background: #1a1a2e; color: #888; font-weight: 500; font-size: 13px; position: sticky; top: 0; z-index: 1; }
+        tr:hover { background: rgba(102, 126, 234, 0.1); }
+        .tag { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; background: rgba(102, 126, 234, 0.2); color: #667eea; }
+        .tag.main { background: rgba(76, 175, 80, 0.2); color: #4caf50; }
+        .size { color: #f39c12; font-weight: 500; }
+        .path { color: #aaa; font-size: 12px; word-break: break-all; }
+        .filter-bar { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
+        .filter-bar select, .filter-bar input { padding: 10px 15px; border-radius: 8px; border: 1px solid #333; background: #16213e; color: #fff; font-size: 14px; min-width: 200px; }
+        .filter-bar select:focus, .filter-bar input:focus { outline: none; border-color: #667eea; }
+        .filter-bar label { color: #888; font-size: 13px; }
+        .package-selector { background: #16213e; border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid #333; }
+        .package-selector h3 { margin-bottom: 15px; font-size: 16px; color: #667eea; }
+        .package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
+        .package-item { padding: 12px 15px; background: #1a1a2e; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: all 0.3s; }
+        .package-item:hover { border-color: #667eea; }
+        .package-item.selected { border-color: #667eea; background: rgba(102, 126, 234, 0.1); }
+        .package-item.main-pkg { border-color: #4caf50; background: rgba(76, 175, 80, 0.1); }
+        .package-item.main-pkg .name { color: #4caf50; }
+        .package-item .name { font-size: 13px; font-weight: 500; margin-bottom: 5px; word-break: break-all; }
+        .package-item .stats { font-size: 11px; color: #888; }
+        .dep-direction { display: flex; gap: 10px; margin-bottom: 15px; }
+        .dep-direction button { padding: 8px 16px; border-radius: 6px; border: 1px solid #333; background: #1a1a2e; color: #888; cursor: pointer; }
+        .dep-direction button.active { background: #667eea; color: #fff; border-color: #667eea; }
+        .file-tree { background: #0f0f1a; border-radius: 8px; padding: 15px; margin-top: 15px; }
+        .empty-state { text-align: center; padding: 40px; color: #666; }
+        .badge { background: #e74c3c; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-left: 5px; }
+        .switch { position: relative; display: inline-block; width: 44px; height: 24px; }
+        .switch input { opacity: 0; width: 0; height: 0; }
+        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .3s; border-radius: 24px; }
+        .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #888; transition: .3s; border-radius: 50%; }
+        input:checked + .slider { background-color: #667eea; }
+        input:checked + .slider:before { transform: translateX(20px); background-color: #fff; }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>UniApp 分包跨包依赖分析</h1>
+        <p>分析各分包之间的相互依赖关系，帮助定位和优化跨包调用</p>
+    </div>
+    
+    <div class="container">
+        <div class="summary">
+            <div class="summary-card">
+                <div class="label">包总数 (含主包)</div>
+                <div class="value">${data.summary.totalPackages}</div>
+            </div>
+            <div class="summary-card">
+                <div class="label">跨包依赖数</div>
+                <div class="value">${data.summary.totalCrossDeps}</div>
+            </div>
+            <div class="summary-card">
+                <div class="label">跨包依赖体积</div>
+                <div class="value">${formatSize(data.summary.totalCrossDepSize)}</div>
+            </div>
+            <div class="summary-card">
+                <div class="label" style="display: flex; align-items: center; gap: 10px;">
+                    显示主包
+                    <label class="switch">
+                        <input type="checkbox" id="showMainToggle" checked>
+                        <span class="slider"></span>
+                    </label>
+                </div>
+                <div class="value" style="font-size: 14px; color: #888;" id="mainToggleHint">已显示主包相关依赖</div>
+            </div>
+        </div>
+        
+        <div class="tabs">
+            <button class="tab active" data-panel="packageView">分包视图</button>
+            <button class="tab" data-panel="graph">依赖关系图</button>
+            <button class="tab" data-panel="matrix">依赖矩阵</button>
+            <button class="tab" data-panel="list">完整列表</button>
+        </div>
+        
+        <div id="packageView" class="panel active">
+            <div class="package-selector">
+                <h3>选择包查看跨包依赖详情</h3>
+                <div class="package-grid" id="packageGrid"></div>
+            </div>
+            <div id="packageDetail" style="display: none;">
+                <div class="dep-direction">
+                    <button class="active" data-dir="imports">该分包引用的其他分包</button>
+                    <button data-dir="importedBy">被其他分包引用</button>
+                </div>
+                <div id="packageDepContent"></div>
+            </div>
+        </div>
+        
+        <div id="graph" class="panel">
+            <div style="background: #16213e; border-radius: 12px; padding: 15px 20px; margin-bottom: 15px; border: 1px solid #333; display: flex; gap: 30px; flex-wrap: wrap; align-items: center;">
+                <div style="font-size: 13px; color: #888;"><span style="color: #667eea;">节点大小</span> = 跨包依赖数量</div>
+                <div style="font-size: 13px; color: #888;"><span style="color: #f39c12;">连线数字</span> = 引用次数</div>
+                <div style="font-size: 13px; color: #888;"><span style="color: #667eea;">箭头方向</span> = 依赖方向</div>
+                <div style="font-size: 13px; color: #4caf50;">点击节点查看详情</div>
+            </div>
+            <div class="chart-container">
+                <div id="graphChart" class="chart" style="height: 600px;"></div>
+            </div>
+        </div>
+        
+        <div id="matrix" class="panel">
+            <div class="chart-container">
+                <div id="matrixChart" class="chart" style="height: 600px;"></div>
+            </div>
+        </div>
+        
+        <div id="list" class="panel">
+            <div class="filter-bar">
+                <div>
+                    <label>源包</label>
+                    <select id="sourceFilter">
+                        <option value="">全部</option>
+                        <option value="main">主包</option>
+                        ${data.subPackages.map(p => `<option value="${p}">${p}</option>`).join('')}
+                    </select>
+                </div>
+                <div>
+                    <label>目标包</label>
+                    <select id="targetFilter">
+                        <option value="">全部</option>
+                        <option value="main">主包</option>
+                        ${data.subPackages.map(p => `<option value="${p}">${p}</option>`).join('')}
+                    </select>
+                </div>
+                <div>
+                    <label>搜索文件</label>
+                    <input type="text" id="searchInput" placeholder="输入文件路径关键词...">
+                </div>
+            </div>
+            <div class="table-container">
+                <table>
+                    <thead>
+                        <tr><th>源文件</th><th>源分包</th><th>目标文件</th><th>目标分包</th><th>体积</th><th>行号</th></tr>
+                    </thead>
+                    <tbody id="depTableBody"></tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        const reportData = ${JSON.stringify(data)};
+        let selectedPackage = null;
+        let depDirection = 'imports';
+        let showMain = true;
+        
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
+                tab.classList.add('active');
+                document.getElementById(tab.dataset.panel).classList.add('active');
+                setTimeout(() => {
+                    if (tab.dataset.panel === 'graph') renderGraph();
+                    if (tab.dataset.panel === 'matrix') renderMatrix();
+                }, 100);
+            });
+        });
+        
+        function getDisplayPackages() { return showMain ? reportData.allPackages : reportData.subPackages; }
+        function filterDeps(deps) { return showMain ? deps : deps.filter(d => d.sourcePackage !== 'main' && d.targetPackage !== 'main'); }
+        
+        function initPackageGrid() {
+            const grid = document.getElementById('packageGrid');
+            const packages = getDisplayPackages();
+            grid.innerHTML = packages.map(pkg => {
+                const deps = reportData.packageDeps[pkg] || { imports: [], importedBy: [] };
+                const importsCount = filterDeps(deps.imports).length;
+                const importedByCount = filterDeps(deps.importedBy).length;
+                const isMain = pkg === 'main';
+                return '<div class="package-item ' + (isMain ? 'main-pkg' : '') + '" data-pkg="' + pkg + '">' +
+                    '<div class="name">' + (isMain ? '主包 (main)' : pkg) + '</div>' +
+                    '<div class="stats">引用: ' + importsCount + ' | 被引用: ' + importedByCount + '</div></div>';
+            }).join('');
+            grid.querySelectorAll('.package-item').forEach(item => {
+                item.addEventListener('click', () => {
+                    grid.querySelectorAll('.package-item').forEach(i => i.classList.remove('selected'));
+                    item.classList.add('selected');
+                    selectedPackage = item.dataset.pkg;
+                    document.getElementById('packageDetail').style.display = 'block';
+                    renderPackageDeps();
+                });
+            });
+        }
+        
+        document.getElementById('showMainToggle').addEventListener('change', function() {
+            showMain = this.checked;
+            document.getElementById('mainToggleHint').textContent = showMain ? '已显示主包相关依赖' : '已隐藏主包相关依赖';
+            if (!showMain && selectedPackage === 'main') {
+                selectedPackage = null;
+                document.getElementById('packageDetail').style.display = 'none';
+            }
+            initPackageGrid();
+            if (selectedPackage) {
+                const pkgItem = document.querySelector('[data-pkg="' + selectedPackage + '"]');
+                if (pkgItem) pkgItem.classList.add('selected');
+                renderPackageDeps();
+            }
+            renderDepList();
+            const activePanel = document.querySelector('.panel.active');
+            if (activePanel && activePanel.id === 'graph') renderGraph();
+            if (activePanel && activePanel.id === 'matrix') renderMatrix();
+        });
+
+        
+        function renderPackageDeps() {
+            const contentDiv = document.getElementById('packageDepContent');
+            const deps = reportData.packageDeps[selectedPackage] || { imports: [], importedBy: [] };
+            const rawDeps = depDirection === 'imports' ? deps.imports : deps.importedBy;
+            const currentDeps = filterDeps(rawDeps);
+            
+            if (currentDeps.length === 0) {
+                contentDiv.innerHTML = '<div class="empty-state">' + (selectedPackage === 'main' ? '主包' : '该分包') + '没有' + (depDirection === 'imports' ? '引用其他包' : '被其他包引用') + '</div>';
+                return;
+            }
+            
+            const grouped = {};
+            currentDeps.forEach(dep => {
+                const key = depDirection === 'imports' ? dep.targetPackage : dep.sourcePackage;
+                if (!grouped[key]) grouped[key] = { deps: [], totalSize: 0 };
+                grouped[key].deps.push(dep);
+                grouped[key].totalSize += dep.size;
+            });
+            
+            let html = '', idx = 0;
+            Object.entries(grouped).sort((a, b) => b[1].totalSize - a[1].totalSize).forEach(([pkg, info]) => {
+                const collapseId = 'collapse-' + idx++;
+                const isMain = pkg === 'main';
+                const bySource = {};
+                info.deps.forEach(dep => {
+                    const sourceFile = depDirection === 'imports' ? dep.source : dep.target;
+                    if (!bySource[sourceFile]) bySource[sourceFile] = [];
+                    bySource[sourceFile].push(dep);
+                });
+                
+                html += '<div class="chart-container" style="margin-bottom: 15px;">' +
+                    '<div class="collapse-header" data-target="' + collapseId + '" style="cursor: pointer; display: flex; align-items: center; justify-content: space-between;">' +
+                    '<div><span class="collapse-icon" style="display: inline-block; width: 20px;">▶</span>' +
+                    '<span class="tag ' + (isMain ? 'main' : '') + '">' + (isMain ? '主包' : pkg) + '</span>' +
+                    '<span class="badge">' + info.deps.length + ' 处依赖</span>' +
+                    '<span style="color: #888; font-size: 12px; margin-left: 8px;">' + Object.keys(bySource).length + ' 个文件</span>' +
+                    '<span class="size" style="margin-left: 10px;">' + formatSize(info.totalSize) + '</span></div>' +
+                    '<span style="color: #667eea; font-size: 12px;">点击展开</span></div>' +
+                    '<div class="collapse-content" id="' + collapseId + '" style="display: none; margin-top: 15px;"><div class="file-tree">';
+                
+                Object.entries(bySource).forEach(([file, fileDeps]) => {
+                    const fileCollapseId = collapseId + '-' + Math.random().toString(36).substr(2, 9);
+                    html += '<div style="border-bottom: 1px dashed #333; padding: 10px 0;">' +
+                        '<div class="file-header" data-target="' + fileCollapseId + '" style="cursor: pointer;">' +
+                        '<span class="file-collapse-icon" style="display: inline-block; width: 16px; font-size: 10px;">▶</span>' +
+                        '<span style="color: #aaa; font-size: 12px;">' + file + '</span>' +
+                        '<span class="badge" style="background: #667eea;">' + fileDeps.length + '</span></div>' +
+                        '<div id="' + fileCollapseId + '" style="display: none; margin-top: 8px; margin-left: 20px; font-size: 11px; color: #667eea;">';
+                    fileDeps.forEach(dep => {
+                        const targetFile = depDirection === 'imports' ? dep.target : dep.source;
+                        html += '<div style="padding: 4px 0;">→ ' + targetFile + ' <span class="size">(' + formatSize(dep.size) + ')</span> L' + dep.location.line + '</div>';
+                    });
+                    html += '</div></div>';
+                });
+                html += '</div></div></div>';
+            });
+            
+            contentDiv.innerHTML = html;
+            
+            contentDiv.querySelectorAll('.collapse-header').forEach(header => {
+                header.addEventListener('click', function() {
+                    const content = document.getElementById(this.dataset.target);
+                    const icon = this.querySelector('.collapse-icon');
+                    const hint = this.querySelector('span:last-child');
+                    if (content.style.display === 'none') {
+                        content.style.display = 'block';
+                        icon.textContent = '▼';
+                        hint.textContent = '点击收起';
+                    } else {
+                        content.style.display = 'none';
+                        icon.textContent = '▶';
+                        hint.textContent = '点击展开';
+                    }
+                });
+            });
+            
+            contentDiv.querySelectorAll('.file-header').forEach(header => {
+                header.addEventListener('click', function(e) {
+                    e.stopPropagation();
+                    const content = document.getElementById(this.dataset.target);
+                    const icon = this.querySelector('.file-collapse-icon');
+                    if (content.style.display === 'none') {
+                        content.style.display = 'block';
+                        icon.textContent = '▼';
+                    } else {
+                        content.style.display = 'none';
+                        icon.textContent = '▶';
+                    }
+                });
+            });
+        }
+        
+        document.querySelectorAll('.dep-direction button').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.dep-direction button').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                depDirection = btn.dataset.dir;
+                if (selectedPackage) renderPackageDeps();
+            });
+        });
+        
+        function renderGraph() {
+            const chart = echarts.init(document.getElementById('graphChart'));
+            const filteredCrossDeps = filterDeps(reportData.crossDeps);
+            const displayPackages = getDisplayPackages();
+            
+            const pkgStats = {};
+            displayPackages.forEach(pkg => { pkgStats[pkg] = { imports: 0, importedBy: 0, importFiles: new Set(), importedByFiles: new Set() }; });
+            filteredCrossDeps.forEach(dep => {
+                if (pkgStats[dep.sourcePackage]) { pkgStats[dep.sourcePackage].imports++; pkgStats[dep.sourcePackage].importFiles.add(dep.target); }
+                if (pkgStats[dep.targetPackage]) { pkgStats[dep.targetPackage].importedBy++; pkgStats[dep.targetPackage].importedByFiles.add(dep.source); }
+            });
+            
+            const packageNodes = displayPackages.map((pkg, idx) => {
+                const stats = pkgStats[pkg] || { imports: 0, importedBy: 0, importFiles: new Set(), importedByFiles: new Set() };
+                const isMain = pkg === 'main';
+                return { id: pkg, name: isMain ? '主包' : pkg, symbolSize: Math.max(40, Math.min(90, 40 + (stats.imports + stats.importedBy) * 2)), category: idx, value: reportData.packages[pkg]?.size || 0, imports: stats.imports, importedBy: stats.importedBy, importFiles: stats.importFiles.size, importedByFiles: stats.importedByFiles.size, itemStyle: isMain ? { color: '#4caf50' } : undefined };
+            });
+            
+            const linkMap = {};
+            filteredCrossDeps.forEach(dep => {
+                const key = dep.sourcePackage + '|' + dep.targetPackage;
+                if (!linkMap[key]) linkMap[key] = { source: dep.sourcePackage, target: dep.targetPackage, value: 0, count: 0, files: [] };
+                linkMap[key].value += dep.size;
+                linkMap[key].count++;
+                linkMap[key].files.push({ source: dep.source, target: dep.target, size: dep.size, line: dep.location.line });
+            });
+            
+            const links = Object.values(linkMap).map(l => ({ source: l.source, target: l.target, value: l.value, count: l.count, files: l.files, lineStyle: { width: Math.max(2, Math.min(12, l.count)) }, label: { show: true, formatter: l.count + '', fontSize: 11, color: '#f39c12', backgroundColor: 'rgba(0,0,0,0.6)', padding: [2, 6], borderRadius: 4 } }));
+            
+            chart.setOption({
+                tooltip: { trigger: 'item', enterable: true, confine: true, extraCssText: 'max-width: 400px; max-height: 300px; overflow: auto;', formatter: params => {
+                    if (params.dataType === 'node') { const d = params.data; return '<b>' + d.name + '</b><br/>引用其他包: ' + d.imports + ' 处<br/>被其他包引用: ' + d.importedBy + ' 处<br/>体积: ' + formatSize(d.value); }
+                    const d = params.data; let html = '<b>' + d.source + ' → ' + d.target + '</b><br/>引用数: ' + d.count + ' 处<br/>总体积: ' + formatSize(d.value) + '<br/><div style="margin-top:8px;border-top:1px solid #444;padding-top:8px;max-height:150px;overflow:auto;">';
+                    d.files.slice(0, 10).forEach(f => { html += '<div style="font-size:11px;margin:4px 0;color:#aaa;">' + f.source.split('/').pop() + ' → ' + f.target.split('/').pop() + ' (' + formatSize(f.size) + ') L' + f.line + '</div>'; });
+                    if (d.files.length > 10) html += '<div style="color:#888;font-size:11px;">...还有 ' + (d.files.length - 10) + ' 处</div>';
+                    return html + '</div>';
+                }},
+                legend: { data: displayPackages.map(p => p === 'main' ? '主包' : p), textStyle: { color: '#888' }, top: 10, type: 'scroll' },
+                series: [{ type: 'graph', layout: 'force', data: packageNodes, links: links, categories: displayPackages.map(p => ({ name: p === 'main' ? '主包' : p })), roam: true, label: { show: true, position: 'bottom', color: '#fff', fontSize: 10, formatter: params => params.data.name + '\\n[' + params.data.imports + '/' + params.data.importedBy + ']' }, force: { repulsion: 1000, edgeLength: [180, 450], gravity: 0.1 }, lineStyle: { color: 'source', curveness: 0.2 }, edgeSymbol: ['none', 'arrow'], edgeSymbolSize: [0, 12], emphasis: { focus: 'adjacency', lineStyle: { width: 8 } } }]
+            });
+            
+            chart.on('click', params => {
+                if (params.dataType === 'node') {
+                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                    document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
+                    document.querySelector('[data-panel="packageView"]').classList.add('active');
+                    document.getElementById('packageView').classList.add('active');
+                    const pkgItem = document.querySelector('[data-pkg="' + params.data.id + '"]');
+                    if (pkgItem) { document.querySelectorAll('.package-item').forEach(i => i.classList.remove('selected')); pkgItem.classList.add('selected'); selectedPackage = params.data.id; document.getElementById('packageDetail').style.display = 'block'; renderPackageDeps(); }
+                }
+            });
+            window.addEventListener('resize', () => chart.resize());
+        }
+        
+        function renderMatrix() {
+            const chart = echarts.init(document.getElementById('matrixChart'));
+            const packages = getDisplayPackages();
+            const filteredCrossDeps = filterDeps(reportData.crossDeps);
+            const matrix = packages.map(() => packages.map(() => 0));
+            filteredCrossDeps.forEach(dep => { const si = packages.indexOf(dep.sourcePackage), ti = packages.indexOf(dep.targetPackage); if (si >= 0 && ti >= 0) matrix[si][ti] += dep.size; });
+            const data = []; let maxValue = 0;
+            matrix.forEach((row, i) => { row.forEach((val, j) => { data.push([i, j, val]); if (val > 0) maxValue = Math.max(maxValue, val); }); });
+            chart.setOption({
+                tooltip: { formatter: params => { const [s, t, v] = params.data; return packages[s] + ' → ' + packages[t] + '<br/>' + (v === 0 ? '无依赖' : '依赖体积: ' + formatSize(v)); } },
+                grid: { left: 180, right: 50, top: 50, bottom: 120 },
+                xAxis: { type: 'category', data: packages, axisLabel: { rotate: 45, color: '#888', fontSize: 10 }, name: '目标包', nameLocation: 'middle', nameGap: 80 },
+                yAxis: { type: 'category', data: packages, axisLabel: { color: '#888', fontSize: 10 }, name: '源包', nameLocation: 'middle', nameGap: 140 },
+                visualMap: { min: 0, max: maxValue || 1, calculable: true, orient: 'horizontal', left: 'center', bottom: 10, inRange: { color: ['#1a1a2e', '#667eea', '#f39c12', '#e74c3c'] }, textStyle: { color: '#888' } },
+                series: [{ type: 'heatmap', data: data, label: { show: true, formatter: p => p.data[2] > 0 ? formatSize(p.data[2]) : '', fontSize: 9, color: '#fff' }, emphasis: { itemStyle: { shadowBlur: 10 } } }]
+            });
+            window.addEventListener('resize', () => chart.resize());
+        }
+        
+        function renderDepList(filter = {}) {
+            const tbody = document.getElementById('depTableBody');
+            let deps = filterDeps(reportData.crossDeps);
+            if (filter.source) deps = deps.filter(d => d.sourcePackage === filter.source);
+            if (filter.target) deps = deps.filter(d => d.targetPackage === filter.target);
+            if (filter.search) { const s = filter.search.toLowerCase(); deps = deps.filter(d => d.source.toLowerCase().includes(s) || d.target.toLowerCase().includes(s)); }
+            tbody.innerHTML = deps.map(dep => {
+                const isMainS = dep.sourcePackage === 'main', isMainT = dep.targetPackage === 'main';
+                return '<tr><td class="path">' + dep.source + '</td><td><span class="tag ' + (isMainS ? 'main' : '') + '">' + (isMainS ? '主包' : dep.sourcePackage) + '</span></td><td class="path">' + dep.target + '</td><td><span class="tag ' + (isMainT ? 'main' : '') + '">' + (isMainT ? '主包' : dep.targetPackage) + '</span></td><td class="size">' + formatSize(dep.size) + '</td><td>L' + dep.location.line + '</td></tr>';
+            }).join('') || '<tr><td colspan="6" style="text-align: center; color: #666;">无匹配数据</td></tr>';
+        }
+        
+        function formatSize(bytes) { if (!bytes || bytes === 0) return '0 B'; if (bytes < 1024) return bytes + ' B'; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB'; return (bytes / (1024 * 1024)).toFixed(2) + ' MB'; }
+        
+        document.getElementById('sourceFilter').addEventListener('change', updateFilter);
+        document.getElementById('targetFilter').addEventListener('change', updateFilter);
+        document.getElementById('searchInput').addEventListener('input', updateFilter);
+        function updateFilter() { renderDepList({ source: document.getElementById('sourceFilter').value, target: document.getElementById('targetFilter').value, search: document.getElementById('searchInput').value }); }
+        
+        initPackageGrid();
+        renderDepList();
+    </script>
+</body>
+</html>`;
+};