{"id":16783245,"url":"https://github.com/sghall/bundle-inspector-webpack-plugin","last_synced_at":"2025-04-10T22:19:34.006Z","repository":{"id":57191575,"uuid":"97781086","full_name":"sghall/bundle-inspector-webpack-plugin","owner":"sghall","description":"Bundle Inspector | Analysis Tool for Webpack","archived":false,"fork":false,"pushed_at":"2017-08-08T02:40:59.000Z","size":5891,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-01T04:32:53.189Z","etag":null,"topics":["analysis","bundle","javascript","tools","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"https://sghall.github.io/bundle-inspector-webpack-plugin/#/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sghall.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-20T02:22:29.000Z","updated_at":"2022-08-21T01:46:13.000Z","dependencies_parsed_at":"2022-09-01T00:52:48.793Z","dependency_job_id":null,"html_url":"https://github.com/sghall/bundle-inspector-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sghall%2Fbundle-inspector-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sghall%2Fbundle-inspector-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sghall%2Fbundle-inspector-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sghall%2Fbundle-inspector-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sghall","download_url":"https://codeload.github.com/sghall/bundle-inspector-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248306293,"owners_count":21081656,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analysis","bundle","javascript","tools","webpack","webpack-plugin"],"created_at":"2024-10-13T07:49:17.454Z","updated_at":"2025-04-10T22:19:33.965Z","avatar_url":"https://github.com/sghall.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## bundle-inspector-webpack-plugin\n\nUnder development.  Feedback welcome.\n\n## See a [demo in your browser](https://sghall.github.io/bundle-inspector-webpack-plugin/#/) - NOT mobile friendly\n\n## CLI:\n\n```\nnpm install -g bundle-inspector-webpack-plugin\n```\n\nBasic usage:\n```\nbundle-inspector-webpack-plugin /path/to/webpack/stats.json\n```\n\nHow do I get JSON stats from webpack?\n```\nwebpack --json \u003e stats.json\n```\n\nSee a demo:\n```\nbundle-inspector-webpack-plugin --demo\n```\n\n## Webpack Plugin:\n\n```\nnpm install bundle-inspector-webpack-plugin --save-dev\n```\n\n### CJS Import:\n\n```\nconst BundleInspector = require('bundle-inspector-webpack-plugin');\n\n// Add it to the plugins in your webpack config...\n// ...\nplugins: [new BundleInspector()]\n// ...\n```\n\n### ES6 Import:\n\n```\nimport BundleInspector from 'bundle-inspector-webpack-plugin';\n\n// Add it to the plugins in your webpack config...\n// ...\nplugins: [new BundleInspector()]\n// ...\n```\n\nThe server listens via websockets so it will update as you're developing.\nThe 3D graph can be resource intensive, so it may be better to keep it on the treemap while your working.\nIt will refresh to the page you're currently on each time webpack updates.\n\n## Shoutouts\n\nUses the data processing from the awesome [Webpack Bundle Analyzer](https://github.com/th0r/webpack-bundle-analyzer).\nThe app is built using [Create React App](https://github.com/facebookincubator/create-react-app).\nLot of ideas and inspiration from [Bundle Buddy](https://github.com/samccone/bundle-buddy).\n\n## Data Views:\n\n### 3D Force Directed Graph\n\nUses:\n\n[d3-force-3d](https://github.com/vasturiano/d3-force-3d) - 3D layout\n\n[three.js](https://github.com/mrdoob/three.js/) - JavaScript WebGL\n\n[subunit](https://github.com/sghall/subunit) - WebGL Selections\n\n### Zoomable Treemap\n\nUses:\n\n[d3](https://github.com/vasturiano/d3-force-3d) - Data Visualization Library\n\nUses the [zoomable treemaps](https://bost.ocks.org/mike/treemap/) concept by Mike Bostock.\n\n## Screenshots:\n\n\u003ca href=\"https://github.com/sghall/bundle-inspector-webpack-plugin\"\u003e\n\t\u003cimg src=\"https://user-images.githubusercontent.com/4615775/28555665-2659bcfe-70b6-11e7-8844-d8f3e4a9381a.png\" alt=\"Bundle Inspector\" style=\"width:450px;\"/\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://github.com/sghall/bundle-inspector-webpack-plugin\"\u003e\n\t\u003cimg src=\"https://user-images.githubusercontent.com/4615775/28555672-3187cbe8-70b6-11e7-97b4-2dd688aa8b72.png\" alt=\"Bundle Inspector\" style=\"width:450px;\"/\u003e\n\u003c/a\u003e\n\n\n## Roadmap\n\nIt's early days for this project.  Lots of work to be done on the visualizations to make them more helpful.\n\nHave a suggestion/idea/comment/criticism?  Open an issue.\n\n\nLogo image created by Oksana Latysheva from the [Noun Project](https://thenounproject.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsghall%2Fbundle-inspector-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsghall%2Fbundle-inspector-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsghall%2Fbundle-inspector-webpack-plugin/lists"}