{"id":16748955,"url":"https://github.com/mshustov/webpack-deps-tree","last_synced_at":"2025-03-21T22:31:56.425Z","repository":{"id":71156920,"uuid":"94810074","full_name":"mshustov/webpack-deps-tree","owner":"mshustov","description":null,"archived":false,"fork":false,"pushed_at":"2017-06-27T14:45:08.000Z","size":5675,"stargazers_count":36,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T05:08:27.123Z","etag":null,"topics":["d3","react","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://restrry.github.io/webpack-deps-tree/static/","language":"TypeScript","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/mshustov.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-19T18:50:25.000Z","updated_at":"2024-05-09T21:38:52.000Z","dependencies_parsed_at":"2023-02-22T13:15:17.140Z","dependency_job_id":null,"html_url":"https://github.com/mshustov/webpack-deps-tree","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mshustov%2Fwebpack-deps-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mshustov%2Fwebpack-deps-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mshustov%2Fwebpack-deps-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mshustov%2Fwebpack-deps-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mshustov","download_url":"https://codeload.github.com/mshustov/webpack-deps-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244880374,"owners_count":20525507,"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":["d3","react","typescript","webpack"],"created_at":"2024-10-13T02:23:25.003Z","updated_at":"2025-03-21T22:31:56.420Z","avatar_url":"https://github.com/mshustov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Motivation\nThe purpose of the lib to provide an easier way for understanding dependency graph in our apps.\nUsually, we want to see next dependencies:\n1. Why that specific module or file was included in the bundle.\n2. Which dependencies in the bundle are included due to the specific module.\n3. Which modules use that specific module.\n\n### Usage\nTool uses `stat.json` file, provided by `webpack`, to build dependency graph.\nSo to get a visual representation of dependency graph:\n1. Run webpack build with saving stats file on disk. ie, `webpack --json \u003e stats.json`.\n2. Go to [online version](https://restrry.github.io/webpack-deps-tree/static/).\n3. Upload generated `stats.json` file.\n\nNext version will have the option to be used as webpack plugin as well.\n\n### Usage cases\nLet's overview all 3 main cases:\n#### Module Overview\nIn that mode, we can see all third party modules that are used in our code base and\nconnection between them. In this way we can spot hidden dependencies or find duplicated modules.\n\n![overview common](http://i.imgur.com/x0h1o6Z.png)\n##### Example:\nHere we can see that stacktrace.js is used only in one place in our code and included some\nheavy third party modules. So we can conclude that it's a good candidate for [async loading](https://webpack.js.org/guides/code-splitting-async/)\n\n![overview the stacktrace.js connections](http://i.imgur.com/v4m14c1.png)\n\n#### Module usage\nIf we want to see all modules that require specific module, we can select appropriate module\nin select element that places at top of that page\n\n![select](http://i.imgur.com/Jozdufk.png)\n\n##### Example:\nWe want to check how much it costs to switch to [preact library](https://github.com/developit/preact-compat). Selecting `react-dom` we can see next picture\n\n![rect-dom occurrence](http://i.imgur.com/9hRJtP4.png)\nWell, seems that we need to look more carefully at those libraries that use React-DOM API under the hood\nand check how they are compatible with `preact`\n\n#### File usage\nAnother case is when we need to understand the whole picture why the file was included in the bundle.\nThe specific files are listed in the table on the left side of the page\n\n![file table](http://i.imgur.com/w6REQi6.png)\nTo see the whole inclusion tree (up to webpack entry point) you should select specific file with a click on its name.\nThan tree will be rendered:\n1. inclusion tree\n\n![inclusion tree](http://i.imgur.com/gyl7ewr.png)\n2. reference table with listing all places where that specific file was required and listing all modules that are required by our specific module\n\n[reference table](http://i.imgur.com/Wwn2ICf.png)\n##### Example\nWe want to split our domain logic by pages, before we need to understand on which pages those files\nare utilized. Having selected desired module in the table at the right, we are able to see the whole\ninclusion tree.\n\n![inclusion tree](http://i.imgur.com/2ywZpWw.png)\nTo reduce visual noise use filtering by name(input element at top left corner of the page)\n\n![filtering by name](http://i.imgur.com/70mifYn.png)\n\n\nwell, now we figured out that desired domain logic file is utilized only on one page and we can start thinking\nabout code-splitting and inclusion that domain logic file into appropriate chunk\n\n![menu page](http://i.imgur.com/zz9i1lJ.png)\n\n\n### Additional notes\nThe lib is still under development and was created due to personal needs. If you have any ideas what should be improved or fixed don't hesitate to create an issue.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmshustov%2Fwebpack-deps-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmshustov%2Fwebpack-deps-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmshustov%2Fwebpack-deps-tree/lists"}