Some sort of script to parse the webpack stats file into a list of nodes and edges.
very much leveraging the code in here https://github.com/webpack/analyse/blob/master/app/graphs/modules.js
Last active
August 12, 2021 09:54
-
-
Save sugendran/de90b1a53e79c3b208477cc79609d055 to your computer and use it in GitHub Desktop.
webpack-stats-to-edge
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/bin/env node | |
| const process = require("process"); | |
| const path = require("path"); | |
| if (process.argv.length < 3) { | |
| console.error("please provide the stats.json file as an argument"); | |
| process.exit(1); | |
| } | |
| const jsonPath = path.resolve(process.argv[2]); | |
| const stats = require(jsonPath); | |
| const getUniqueReasons = (reasons) => { | |
| var done = {}; | |
| return reasons.filter(function (reason) { | |
| var parent = reason.module; | |
| if (done["$" + parent]) return false; | |
| done["$" + parent] = true; | |
| return true; | |
| }); | |
| }; | |
| const moduleId = (id) => `module_${id}`; | |
| const edgeId = (id1, id2) => `edge_${id1}_${id2}`; | |
| const nodeMap = new Map(); | |
| const nodes = []; | |
| const links = []; | |
| // get the nodes | |
| stats.modules.forEach(function (module) { | |
| if (module.id === "") { | |
| // these are CSS | |
| return; | |
| } | |
| if (module.name.startsWith("./node_modules/")) { | |
| return; | |
| } | |
| const ext = path.extname(module.name); | |
| const node = { | |
| id: moduleId(module.id), | |
| moduleId: module.id, | |
| // module: module, | |
| size: module.size + 1, | |
| name: module.name, | |
| color: ext === ".jsx" ? "green" : ext === ".js" ? "red" : "blue", | |
| }; | |
| nodeMap.set(module.id, node); | |
| nodes.push(node); | |
| }); | |
| // get the edges | |
| stats.modules.forEach(function (module) { | |
| if (module.id === "") { | |
| // these are CSS | |
| return; | |
| } | |
| if (module.name.startsWith("./node_modules/")) { | |
| return; | |
| } | |
| var uniqueReasons = getUniqueReasons(module.reasons); | |
| uniqueReasons.forEach(function (reason) { | |
| var parentModule = nodeMap.get(reason.moduleId); | |
| if (!parentModule) return; | |
| links.push({ | |
| id: edgeId(module.id, parentModule.id), | |
| sourceModuleId: parentModule.moduleId, | |
| // sourceModule: parentModule, | |
| source: parentModule.id, | |
| // targetModule: module, | |
| targetModuleId: module.id, | |
| target: moduleId(module.id), | |
| }); | |
| }); | |
| }); | |
| const html = ` | |
| <html> | |
| <head> | |
| <style> body { margin: 0; } </style> | |
| <script src="http://unpkg.com/force-graph"></script> | |
| </head> | |
| <body> | |
| <div id="graph"></div> | |
| <script> | |
| window.devicePixelRatio = 1; // use standard resolution in retina displays | |
| const data = ${JSON.stringify({ nodes, links }, null, 2)}; | |
| const Graph = ForceGraph()(document.getElementById('graph')) | |
| .graphData(data) | |
| .d3AlphaDecay(0) | |
| .d3VelocityDecay(0.05) | |
| .cooldownTime(3000) | |
| .linkColor(() => "rgba(0,0,0,0.05)") | |
| .zoom(0.5); | |
| </script> | |
| </body> | |
| </html> | |
| `; | |
| console.log(html); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "webpack-stats-to-edge", | |
| "version": "1.0.0", | |
| "description": "Some sort of script to parse the webpack stats file into a list of nodes and edges.", | |
| "bin": "index.js", | |
| "repository": { | |
| "type": "git", | |
| "url": "git+ssh://[email protected]/de90b1a53e79c3b208477cc79609d055.git" | |
| }, | |
| "author": "", | |
| "license": "MIT", | |
| "bugs": { | |
| "url": "https://gist.github.com/de90b1a53e79c3b208477cc79609d055" | |
| }, | |
| "homepage": "https://gist.github.com/de90b1a53e79c3b208477cc79609d055" | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment