rn-bundle-analyzer 1.1.0

package/dist/types.d.ts

@@ -0,0 +1,41 @@
+export interface FileInfo {
+    path: string;
+    size: number;
+    sizeKB: number;
+    lastModified: string;
+    extension: string;
+}
+export interface FileTypeStats {
+    [ext: string]: {
+        count: number;
+        size: number;
+    };
+}
+export interface InverseDependencyInfo {
+    path: string;
+    dependents: string[];
+    dependentCount: number;
+}
+export interface TreeNode {
+    path: string;
+    size: number;
+    files: FileInfo[];
+    children: {
+        [name: string]: TreeNode;
+    };
+}
+export interface TreeOutputNode {
+    path: string;
+    size: number;
+    ratio: number;
+    child?: TreeOutputNode[];
+}
+export interface TreeData {
+    totalSize: number;
+    pathAnalyse: TreeOutputNode[];
+}
+export interface MetroModule {
+    path: string;
+    inverseDependencies: Iterable<string>;
+}
+export type ProcessModuleFilter = (module: MetroModule) => boolean;

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/envSetup.d.ts

@@ -0,0 +1 @@
+export declare function prepareSaveEnv(): void;

package/dist/utils/envSetup.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareSaveEnv = prepareSaveEnv;
+const path_1 = __importDefault(require("path"));
+const config_1 = require("../config");
+const fileUtils_1 = require("./fileUtils");
+const analyseTemplate_1 = require("../templates/analyseTemplate");
+let isPrepared = false;
+function prepareSaveEnv() {
+    if (isPrepared)
+        return;
+    isPrepared = true;
+    const saveFullPath = path_1.default.join(process.cwd(), config_1.SAVE_DIR);
+    (0, fileUtils_1.ensureDir)(saveFullPath);
+    (0, fileUtils_1.writeFile)(path_1.default.join(saveFullPath, config_1.OUTPUT_FILES.HTML), analyseTemplate_1.analyseHtml);
+    (0, fileUtils_1.writeFile)(path_1.default.join(saveFullPath, config_1.OUTPUT_FILES.ICONS_INLINE), analyseTemplate_1.iconsInlineJs);
+    (0, fileUtils_1.writeFile)(path_1.default.join(saveFullPath, config_1.OUTPUT_FILES.TAILWIND_JS), analyseTemplate_1.tailwindJs);
+}

package/dist/utils/fileUtils.d.ts

@@ -0,0 +1,3 @@
+export declare function ensureDir(dirPath: string): void;
+export declare function writeFile(filePath: string, content: string): void;
+export declare function toRelativePath(filePath: string): string;

package/dist/utils/fileUtils.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureDir = ensureDir;
+exports.writeFile = writeFile;
+exports.toRelativePath = toRelativePath;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+function ensureDir(dirPath) {
+    if (!fs_1.default.existsSync(dirPath)) {
+        try {
+            fs_1.default.mkdirSync(dirPath, { recursive: true });
+            console.log(`✅ 创建目录: ${dirPath}`);
+        }
+        catch (error) {
+            console.error(`❌ 创建目录失败: ${dirPath}`, error.message);
+        }
+    }
+}
+function writeFile(filePath, content) {
+    fs_1.default.writeFileSync(filePath, content, 'utf8');
+}
+function toRelativePath(filePath) {
+    return path_1.default.relative(process.cwd(), filePath);
+}

package/dist/writers/fileInfoWriter.d.ts

@@ -0,0 +1,12 @@
+import { FileInfo, FileTypeStats } from '../types';
+export declare function writeFileInfo(fileInfoArray: FileInfo[]): {
+    timestamp: string;
+    buildInfo: {
+        totalFiles: number;
+        totalSize: number;
+        totalSizeKB: number;
+        totalSizeMB: number;
+    };
+    fileTypeStats: FileTypeStats;
+    files: FileInfo[];
+};

package/dist/writers/fileInfoWriter.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.writeFileInfo = writeFileInfo;
+const path_1 = __importDefault(require("path"));
+const config_1 = require("../config");
+const fileUtils_1 = require("../utils/fileUtils");
+const envSetup_1 = require("../utils/envSetup");
+function writeFileInfo(fileInfoArray) {
+    (0, envSetup_1.prepareSaveEnv)();
+    const totalSize = fileInfoArray.reduce((sum, file) => sum + file.size, 0);
+    const fileTypeStats = {};
+    fileInfoArray.forEach(file => {
+        const ext = file.extension || 'unknown';
+        if (!fileTypeStats[ext])
+            fileTypeStats[ext] = { count: 0, size: 0 };
+        fileTypeStats[ext].count++;
+        fileTypeStats[ext].size += file.size;
+    });
+    const fileInfo = {
+        timestamp: new Date().toISOString(),
+        buildInfo: {
+            totalFiles: fileInfoArray.length,
+            totalSize,
+            totalSizeKB: Math.round(totalSize / 1024 * 100) / 100,
+            totalSizeMB: Math.round(totalSize / (1024 * 1024) * 100) / 100,
+        },
+        fileTypeStats,
+        files: fileInfoArray.slice().sort((a, b) => b.size - a.size),
+    };
+    const content = `window.packageAnalyseData = ${JSON.stringify(fileInfo, null, 2)};\n`;
+    (0, fileUtils_1.writeFile)(path_1.default.join(process.cwd(), config_1.SAVE_DIR, config_1.OUTPUT_FILES.PACKAGE_DATA), content);
+    console.log(`✅ RN 包文件信息已保存到 ${config_1.OUTPUT_FILES.PACKAGE_DATA}`);
+    console.log(`📊 统计信息: ${fileInfo.buildInfo.totalFiles} 个文件, 总大小 ${fileInfo.buildInfo.totalSizeKB} KB`);
+    console.log('📈 文件类型统计:');
+    Object.entries(fileTypeStats).forEach(([ext, stats]) => {
+        console.log(`   ${ext}: ${stats.count} 个文件, ${Math.round(stats.size / 1024 * 100) / 100} KB`);
+    });
+    return fileInfo;
+}

package/dist/writers/inverseDependencyWriter.d.ts

@@ -0,0 +1,2 @@
+import { InverseDependencyInfo } from '../types';
+export declare function writeInverseDependencies(inverseDepsArray: InverseDependencyInfo[]): void;

package/dist/writers/inverseDependencyWriter.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.writeInverseDependencies = writeInverseDependencies;
+const path_1 = __importDefault(require("path"));
+const config_1 = require("../config");
+const fileUtils_1 = require("../utils/fileUtils");
+const envSetup_1 = require("../utils/envSetup");
+function writeInverseDependencies(inverseDepsArray) {
+    if (!inverseDepsArray || inverseDepsArray.length === 0) {
+        console.log('⚠️ 没有收集到反向依赖信息');
+        return;
+    }
+    (0, envSetup_1.prepareSaveEnv)();
+    const sortedInverseDeps = inverseDepsArray.slice().sort((a, b) => b.dependentCount - a.dependentCount);
+    const totalFiles = sortedInverseDeps.length;
+    const totalDependencies = sortedInverseDeps.reduce((sum, item) => sum + item.dependentCount, 0);
+    const avgDependencies = totalFiles > 0 ? Math.round((totalDependencies / totalFiles) * 100) / 100 : 0;
+    const mostDependedFiles = sortedInverseDeps.slice(0, config_1.TOP_DEPENDED_LIMIT);
+    const inverseDependencyData = {
+        timestamp: new Date().toISOString(),
+        summary: {
+            totalFiles,
+            totalDependencies,
+            averageDependencies: avgDependencies,
+            mostDependedFiles: mostDependedFiles.map(item => ({
+                path: item.path,
+                dependentCount: item.dependentCount,
+            })),
+        },
+        inverseDependencies: sortedInverseDeps,
+    };
+    const content = `window.inverseDependencyData = ${JSON.stringify(inverseDependencyData, null, 2)};\n`;
+    try {
+        (0, fileUtils_1.writeFile)(path_1.default.join(process.cwd(), config_1.SAVE_DIR, config_1.OUTPUT_FILES.INVERSE_DEPS), content);
+        console.log(`✅ RN 包反向依赖分析已保存到 ${config_1.OUTPUT_FILES.INVERSE_DEPS}`);
+        console.log(`🔗 反向依赖统计: ${totalFiles} 个文件, ${totalDependencies} 个依赖关系`);
+        console.log('📊 最受依赖的文件 (前5个):');
+        mostDependedFiles.slice(0, 5).forEach((item, index) => {
+            console.log(`   ${index + 1}. ${item.path}: ${item.dependentCount} 个依赖者`);
+        });
+    }
+    catch (error) {
+        console.error('❌ 保存反向依赖分析失败:', error.message);
+    }
+}

package/dist/writers/treeWriter.d.ts

@@ -0,0 +1,2 @@
+import { TreeData } from '../types';
+export declare function writeTreeAnalysis(treeData: TreeData): void;

package/dist/writers/treeWriter.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.writeTreeAnalysis = writeTreeAnalysis;
+const path_1 = __importDefault(require("path"));
+const config_1 = require("../config");
+const fileUtils_1 = require("../utils/fileUtils");
+const envSetup_1 = require("../utils/envSetup");
+function writeTreeAnalysis(treeData) {
+    (0, envSetup_1.prepareSaveEnv)();
+    const content = `window.treeAnalyseData = ${JSON.stringify(treeData, null, 2)};\n`;
+    try {
+        (0, fileUtils_1.writeFile)(path_1.default.join(process.cwd(), config_1.SAVE_DIR, config_1.OUTPUT_FILES.TREE_DATA), content);
+        console.log(`✅ RN 包树形分析已保存到 ${config_1.OUTPUT_FILES.TREE_DATA}`);
+        console.log(`🌳 树形结构: ${treeData.pathAnalyse.length} 个根目录/文件`);
+        console.log('📊 根级目录大小统计:');
+        treeData.pathAnalyse.slice(0, config_1.TREE_DISPLAY_LIMIT).forEach(item => {
+            console.log(`   ${item.path}: ${Math.round(item.size / 1024 * 100) / 100} KB (${(item.ratio * 100).toFixed(2)}%)`);
+        });
+    }
+    catch (error) {
+        console.error('❌ 保存树形分析失败:', error.message);
+    }
+}

package/index.js

@@ -0,0 +1 @@
+module.exports = require('./dist/index')

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "rn-bundle-analyzer",
+  "version": "1.1.0",
+  "description": "React Native bundle analysis tool with file, tree, and inverse dependency insights.",
+  "type": "commonjs",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc && cp src/templates/analyse.pug src/templates/icons-inline.js src/templates/tailwindcss.js dist/templates/",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "feather-icons": "^4.29.2",
+    "pug": "^3.0.4"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "@types/pug": "^2.0.10",
+    "typescript": "^6.0.2"
+  }
+}

package/scripts/compile-pug.js

@@ -0,0 +1,17 @@
+const fs = require('fs')
+const path = require('path')
+const pug = require('pug')
+const { icons } = require('./lucide-icons.cjs')
+
+const root = path.join(__dirname, '..')
+const src = path.join(root, 'src/templates/analyse.pug')
+const out = path.join(root, 'src/templates/analyse.html')
+
+const html = pug.renderFile(src, {
+  pretty: true,
+  basedir: path.join(root, 'src/templates'),
+  icons,
+})
+
+fs.writeFileSync(out, html, 'utf8')
+console.log('Wrote', out)

package/src/builders/treeBuilder.ts

@@ -0,0 +1,57 @@
+import path from 'path'
+import { FileInfo, TreeNode, TreeOutputNode, TreeData } from '../types'
+
+export function buildTreeStructure(fileInfoArray: FileInfo[], totalSize: number): TreeData {
+  const tree: { [name: string]: TreeNode } = {}
+
+  fileInfoArray.forEach(fileInfo => {
+    const pathParts = fileInfo.path.split(path.sep).filter(part => part !== '')
+    let currentLevel = tree
+    let currentPath = ''
+
+    pathParts.forEach((part, index) => {
+      currentPath = currentPath ? path.join(currentPath, part) : part
+
+      if (!currentLevel[part]) {
+        currentLevel[part] = {
+          path: currentPath,
+          size: 0,
+          files: [],
+          children: {},
+        }
+      }
+
+      currentLevel[part].size += fileInfo.size
+
+      if (index === pathParts.length - 1) {
+        currentLevel[part].files.push(fileInfo)
+      }
+
+      currentLevel = currentLevel[part].children
+    })
+  })
+
+  const convertToTargetFormat = (treeNode: TreeNode, nodePath: string): TreeOutputNode => {
+    const result: TreeOutputNode = {
+      path: nodePath,
+      size: treeNode.size,
+      ratio: Math.round((treeNode.size / totalSize) * 10000) / 10000,
+    }
+
+    const childrenArray = Object.values(treeNode.children).map(childNode =>
+      convertToTargetFormat(childNode, childNode.path)
+    )
+
+    if (childrenArray.length > 0) {
+      result.child = childrenArray.sort((a, b) => b.size - a.size)
+    }
+
+    return result
+  }
+
+  const pathAnalyse = Object.values(tree)
+    .map(rootNode => convertToTargetFormat(rootNode, rootNode.path))
+    .sort((a, b) => b.size - a.size)
+
+  return { totalSize, pathAnalyse }
+}

package/src/collectors/fileCollector.ts

@@ -0,0 +1,24 @@
+import fs from 'fs'
+import path from 'path'
+import { toRelativePath } from '../utils/fileUtils'
+import { FileInfo } from '../types'
+
+export function collectFileInfo(filePath: string): FileInfo | null {
+  try {
+    const stats = fs.statSync(filePath)
+    const relativePath = toRelativePath(filePath)
+
+    console.log('📦 RN 打包统计：', relativePath, `${(stats.size / 1024).toFixed(2)} KB`)
+
+    return {
+      path: relativePath,
+      size: stats.size,
+      sizeKB: Math.round(stats.size / 1024 * 100) / 100,
+      lastModified: stats.mtime.toISOString(),
+      extension: path.extname(filePath),
+    }
+  } catch (error: any) {
+    console.warn(`⚠️ 无法获取文件信息: ${filePath}`, error.message)
+    return null
+  }
+}

package/src/collectors/inverseDependencyCollector.ts

@@ -0,0 +1,32 @@
+import { toRelativePath } from '../utils/fileUtils'
+import { InverseDependencyInfo } from '../types'
+
+export function collectInverseDependencies(filePath: string, inverseDependencies: string[]): InverseDependencyInfo | null {
+  try {
+    const relativePath = toRelativePath(filePath)
+
+    if (!inverseDependencies || inverseDependencies.length === 0) {
+      return null
+    }
+
+    const relativeInverseDeps = inverseDependencies
+      .filter(dep => dep && typeof dep === 'string')
+      .map(dep => toRelativePath(dep))
+      .filter(dep => dep && !dep.startsWith('..'))
+
+    if (relativeInverseDeps.length === 0) {
+      return null
+    }
+
+    console.log(`🔗 反向依赖收集: ${relativePath} <- ${relativeInverseDeps.length} 个依赖者`)
+
+    return {
+      path: relativePath,
+      dependents: relativeInverseDeps,
+      dependentCount: relativeInverseDeps.length,
+    }
+  } catch (error: any) {
+    console.warn(`⚠️ 收集反向依赖失败: ${filePath}`, error.message)
+    return null
+  }
+}

package/src/config.ts

@@ -0,0 +1,14 @@
+export const SAVE_DIR = 'rn-package-analyse'
+
+export const OUTPUT_FILES = {
+  HTML: 'rn-package-analyse.html',
+  ICONS_INLINE: 'icons-inline.js',
+  TAILWIND_JS: 'tailwindcss.js',
+  PACKAGE_DATA: 'rn-bundle-files-data.js',
+  TREE_DATA: 'rn-bundle-tree-data.js',
+  INVERSE_DEPS: 'rn-bundle-inverse-deps-data.js',
+} as const
+
+export const SAVE_DELAY = 3000
+export const TREE_DISPLAY_LIMIT = 5
+export const TOP_DEPENDED_LIMIT = 10

package/src/fileInfoCollector.ts

@@ -0,0 +1,50 @@
+import { SAVE_DELAY } from './config'
+import { collectFileInfo } from './collectors/fileCollector'
+import { collectInverseDependencies } from './collectors/inverseDependencyCollector'
+import { buildTreeStructure } from './builders/treeBuilder'
+import { writeFileInfo } from './writers/fileInfoWriter'
+import { writeTreeAnalysis } from './writers/treeWriter'
+import { writeInverseDependencies } from './writers/inverseDependencyWriter'
+import { FileInfo, InverseDependencyInfo } from './types'
+
+const files = new Map<string, FileInfo>()
+const inverseDependenciesMap = new Map<string, InverseDependencyInfo>()
+let saveTimeout: ReturnType<typeof setTimeout> | null = null
+
+function onCollectFileInfo(filePath: string): void {
+  const info = collectFileInfo(filePath)
+  if (info) {
+    files.set(info.path, info)
+  }
+}
+
+function onCollectInverseDependencies(filePath: string, deps: string[]): void {
+  const info = collectInverseDependencies(filePath, deps)
+  if (info) {
+    inverseDependenciesMap.set(info.path, info)
+  }
+}
+
+function scheduleSave(): void {
+  if (saveTimeout) clearTimeout(saveTimeout)
+  saveTimeout = setTimeout(saveAll, SAVE_DELAY)
+}
+
+function saveAll(): void {
+  if (files.size === 0) {
+    console.log('⚠️ 没有收集到文件信息')
+    return
+  }
+
+  const fileInfoArray = Array.from(files.values())
+  const totalSize = fileInfoArray.reduce((sum, f) => sum + f.size, 0)
+
+  writeFileInfo(fileInfoArray)
+
+  const treeData = buildTreeStructure(fileInfoArray, totalSize)
+  writeTreeAnalysis(treeData)
+
+  writeInverseDependencies(Array.from(inverseDependenciesMap.values()))
+}
+
+export { onCollectFileInfo as collectFileInfo, onCollectInverseDependencies as collectInverseDependencies, scheduleSave }

package/src/index.ts

@@ -0,0 +1,15 @@
+import * as fileInfoCollector from './fileInfoCollector'
+import { MetroModule, ProcessModuleFilter } from './types'
+
+export const createProcessModuleFilter = (originalProcessModuleFilter?: ProcessModuleFilter): ProcessModuleFilter => {
+  return function (module: MetroModule): boolean {
+    if (module && module.path) {
+      fileInfoCollector.collectFileInfo(module.path)
+      fileInfoCollector.collectInverseDependencies(module.path, Array.from(module.inverseDependencies))
+      fileInfoCollector.scheduleSave()
+    }
+    return originalProcessModuleFilter ? originalProcessModuleFilter(module) : true
+  }
+}
+
+export type { FileInfo, FileTypeStats, InverseDependencyInfo, TreeNode, TreeOutputNode, TreeData, MetroModule, ProcessModuleFilter } from './types'