rn-bundle-analyzer 1.1.0

package/README.md

@@ -0,0 +1,80 @@
+# rn-bundle-analyzer
+
+`rn-bundle-analyzer` is a React Native bundle analysis tool.
+It collects module data during the Metro bundling process and generates a visual report.
+It does not depend on SourceMap parsing, which makes it useful for bundle-size diagnostics and dependency hotspot investigation.
+
+## Features
+
+- File list view: inspect bundled files by size, path, and type
+- Directory tree view: analyze size distribution by folder hierarchy
+- Inverse dependency view: see which files depend on a target file
+- Static report output: generate HTML + JS data files for sharing and archiving
+
+## Installation
+
+```bash
+yarn add -D rn-package-analyse
+# or
+npm i -D rn-package-analyse
+```
+
+## Quick Setup
+
+Add `createProcessModuleFilter` to your `metro.config.js`:
+
+```javascript
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { mergeConfig } = require('@react-native/metro-config')
+const { getMetroConfig } = require('@jdtaro/plugin-platform-jdrn/dist/supporter')
+const { createProcessModuleFilter } = require('rn-package-analyse')
+
+module.exports = (async function () {
+  const baseConfig = await getMetroConfig()
+
+  // Preserve any existing processModuleFilter logic.
+  const originalProcessModuleFilter = baseConfig.serializer?.processModuleFilter
+
+  return mergeConfig(
+    {
+      serializer: {
+        // Collect module data during bundling and write report artifacts.
+        processModuleFilter: createProcessModuleFilter(originalProcessModuleFilter),
+      },
+    },
+    baseConfig
+  )
+})()
+```
+
+## Generate the Report
+
+After setup, run your normal React Native bundle/build command (for example, a release build or bundle command).
+When bundling completes, a `rn-package-analyse` folder will be generated in your project root.
+
+## Typical Use Cases
+
+- Bundle size suddenly increases and you need a fast root-cause analysis
+- A core file appears over-coupled and you want inverse dependency tracing
+- Compare bundle structure across builds/releases for regression checks
+
+## Notes
+
+- Ensure Metro `serializer.processModuleFilter` is correctly wired.
+- If you already have a custom `processModuleFilter`, pass it through as shown above.
+- Use consistent build parameters in CI for reliable cross-build comparison.
+
+## Local Development
+
+```bash
+npm run build
+```
+
+Build steps:
+
+1. Compile TypeScript into `dist`
+2. Copy template assets into `dist/templates`
+
+## License
+
+ISC

package/dist/builders/treeBuilder.d.ts

@@ -0,0 +1,2 @@
+import { FileInfo, TreeData } from '../types';
+export declare function buildTreeStructure(fileInfoArray: FileInfo[], totalSize: number): TreeData;

package/dist/builders/treeBuilder.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildTreeStructure = buildTreeStructure;
+const path_1 = __importDefault(require("path"));
+function buildTreeStructure(fileInfoArray, totalSize) {
+    const tree = {};
+    fileInfoArray.forEach(fileInfo => {
+        const pathParts = fileInfo.path.split(path_1.default.sep).filter(part => part !== '');
+        let currentLevel = tree;
+        let currentPath = '';
+        pathParts.forEach((part, index) => {
+            currentPath = currentPath ? path_1.default.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, nodePath) => {
+        const result = {
+            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/dist/collectors/fileCollector.d.ts

@@ -0,0 +1,2 @@
+import { FileInfo } from '../types';
+export declare function collectFileInfo(filePath: string): FileInfo | null;

package/dist/collectors/fileCollector.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.collectFileInfo = collectFileInfo;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const fileUtils_1 = require("../utils/fileUtils");
+function collectFileInfo(filePath) {
+    try {
+        const stats = fs_1.default.statSync(filePath);
+        const relativePath = (0, fileUtils_1.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_1.default.extname(filePath),
+        };
+    }
+    catch (error) {
+        console.warn(`⚠️ 无法获取文件信息: ${filePath}`, error.message);
+        return null;
+    }
+}

package/dist/collectors/inverseDependencyCollector.d.ts

@@ -0,0 +1,2 @@
+import { InverseDependencyInfo } from '../types';
+export declare function collectInverseDependencies(filePath: string, inverseDependencies: string[]): InverseDependencyInfo | null;

package/dist/collectors/inverseDependencyCollector.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectInverseDependencies = collectInverseDependencies;
+const fileUtils_1 = require("../utils/fileUtils");
+function collectInverseDependencies(filePath, inverseDependencies) {
+    try {
+        const relativePath = (0, fileUtils_1.toRelativePath)(filePath);
+        if (!inverseDependencies || inverseDependencies.length === 0) {
+            return null;
+        }
+        const relativeInverseDeps = inverseDependencies
+            .filter(dep => dep && typeof dep === 'string')
+            .map(dep => (0, fileUtils_1.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) {
+        console.warn(`⚠️ 收集反向依赖失败: ${filePath}`, error.message);
+        return null;
+    }
+}

package/dist/config.d.ts

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

package/dist/config.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOP_DEPENDED_LIMIT = exports.TREE_DISPLAY_LIMIT = exports.SAVE_DELAY = exports.OUTPUT_FILES = exports.SAVE_DIR = void 0;
+exports.SAVE_DIR = 'rn-package-analyse';
+exports.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',
+};
+exports.SAVE_DELAY = 3000;
+exports.TREE_DISPLAY_LIMIT = 5;
+exports.TOP_DEPENDED_LIMIT = 10;

package/dist/fileInfoCollector.d.ts

@@ -0,0 +1,4 @@
+declare function onCollectFileInfo(filePath: string): void;
+declare function onCollectInverseDependencies(filePath: string, deps: string[]): void;
+declare function scheduleSave(): void;
+export { onCollectFileInfo as collectFileInfo, onCollectInverseDependencies as collectInverseDependencies, scheduleSave };

package/dist/fileInfoCollector.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectFileInfo = onCollectFileInfo;
+exports.collectInverseDependencies = onCollectInverseDependencies;
+exports.scheduleSave = scheduleSave;
+const config_1 = require("./config");
+const fileCollector_1 = require("./collectors/fileCollector");
+const inverseDependencyCollector_1 = require("./collectors/inverseDependencyCollector");
+const treeBuilder_1 = require("./builders/treeBuilder");
+const fileInfoWriter_1 = require("./writers/fileInfoWriter");
+const treeWriter_1 = require("./writers/treeWriter");
+const inverseDependencyWriter_1 = require("./writers/inverseDependencyWriter");
+const files = new Map();
+const inverseDependenciesMap = new Map();
+let saveTimeout = null;
+function onCollectFileInfo(filePath) {
+    const info = (0, fileCollector_1.collectFileInfo)(filePath);
+    if (info) {
+        files.set(info.path, info);
+    }
+}
+function onCollectInverseDependencies(filePath, deps) {
+    const info = (0, inverseDependencyCollector_1.collectInverseDependencies)(filePath, deps);
+    if (info) {
+        inverseDependenciesMap.set(info.path, info);
+    }
+}
+function scheduleSave() {
+    if (saveTimeout)
+        clearTimeout(saveTimeout);
+    saveTimeout = setTimeout(saveAll, config_1.SAVE_DELAY);
+}
+function saveAll() {
+    if (files.size === 0) {
+        console.log('⚠️ 没有收集到文件信息');
+        return;
+    }
+    const fileInfoArray = Array.from(files.values());
+    const totalSize = fileInfoArray.reduce((sum, f) => sum + f.size, 0);
+    (0, fileInfoWriter_1.writeFileInfo)(fileInfoArray);
+    const treeData = (0, treeBuilder_1.buildTreeStructure)(fileInfoArray, totalSize);
+    (0, treeWriter_1.writeTreeAnalysis)(treeData);
+    (0, inverseDependencyWriter_1.writeInverseDependencies)(Array.from(inverseDependenciesMap.values()));
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { ProcessModuleFilter } from './types';
+export declare const createProcessModuleFilter: (originalProcessModuleFilter?: ProcessModuleFilter) => ProcessModuleFilter;
+export type { FileInfo, FileTypeStats, InverseDependencyInfo, TreeNode, TreeOutputNode, TreeData, MetroModule, ProcessModuleFilter } from './types';

package/dist/index.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createProcessModuleFilter = void 0;
+const fileInfoCollector = __importStar(require("./fileInfoCollector"));
+const createProcessModuleFilter = (originalProcessModuleFilter) => {
+    return function (module) {
+        if (module && module.path) {
+            fileInfoCollector.collectFileInfo(module.path);
+            fileInfoCollector.collectInverseDependencies(module.path, Array.from(module.inverseDependencies));
+            fileInfoCollector.scheduleSave();
+        }
+        return originalProcessModuleFilter ? originalProcessModuleFilter(module) : true;
+    };
+};
+exports.createProcessModuleFilter = createProcessModuleFilter;