Under development. Feedback welcome.
demo in your browser - NOT mobile friendlySee a
npm install -g bundle-inspector-webpack-plugin
How do I get JSON stats from webpack?
webpack --json > stats.json
See a demo:
npm install bundle-inspector-webpack-plugin --save-dev
const BundleInspector = require('bundle-inspector-webpack-plugin'); // Add it to the plugins in your webpack config... // ... plugins: [new BundleInspector()] // ...
import BundleInspector from 'bundle-inspector-webpack-plugin'; // Add it to the plugins in your webpack config... // ... plugins: [new BundleInspector()] // ...
The server listens via websockets so it will update as you're developing. The 3D graph can be resource intensive, so it may be better to keep it on the treemap while your working. It will refresh to the page you're currently on each time webpack updates.
3D Force Directed Graph
d3-force-3d - 3D layout
subunit - WebGL Selections
d3 - Data Visualization Library
Uses the zoomable treemaps concept by Mike Bostock.
It's early days for this project. Lots of work to be done on the visualizations to make them more helpful.
Have a suggestion/idea/comment/criticism? Open an issue.
Logo image created by Oksana Latysheva from the Noun Project