Skip to content

Instantly share code, notes, and snippets.

@sugendran
Last active August 12, 2021 09:54
Show Gist options
  • Save sugendran/de90b1a53e79c3b208477cc79609d055 to your computer and use it in GitHub Desktop.
Save sugendran/de90b1a53e79c3b208477cc79609d055 to your computer and use it in GitHub Desktop.
webpack-stats-to-edge
#!/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);
{
"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://git@gist.github.com/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