sugendran/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## index.js
#!/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);

## package.json
{
  "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"
}
	#!/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"
	}