https://github.com/mshustov/webpack-deps-tree
https://github.com/mshustov/webpack-deps-tree
d3 react typescript webpack
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/mshustov/webpack-deps-tree
- Owner: mshustov
- License: mit
- Created: 2017-06-19T18:50:25.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-27T14:45:08.000Z (almost 9 years ago)
- Last Synced: 2025-03-15T05:08:27.123Z (over 1 year ago)
- Topics: d3, react, typescript, webpack
- Language: TypeScript
- Homepage: https://restrry.github.io/webpack-deps-tree/static/
- Size: 5.41 MB
- Stars: 36
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### Motivation
The purpose of the lib to provide an easier way for understanding dependency graph in our apps.
Usually, we want to see next dependencies:
1. Why that specific module or file was included in the bundle.
2. Which dependencies in the bundle are included due to the specific module.
3. Which modules use that specific module.
### Usage
Tool uses `stat.json` file, provided by `webpack`, to build dependency graph.
So to get a visual representation of dependency graph:
1. Run webpack build with saving stats file on disk. ie, `webpack --json > stats.json`.
2. Go to [online version](https://restrry.github.io/webpack-deps-tree/static/).
3. Upload generated `stats.json` file.
Next version will have the option to be used as webpack plugin as well.
### Usage cases
Let's overview all 3 main cases:
#### Module Overview
In that mode, we can see all third party modules that are used in our code base and
connection between them. In this way we can spot hidden dependencies or find duplicated modules.
##### Example:
Here we can see that stacktrace.js is used only in one place in our code and included some
heavy third party modules. So we can conclude that it's a good candidate for [async loading](https://webpack.js.org/guides/code-splitting-async/)
#### Module usage
If we want to see all modules that require specific module, we can select appropriate module
in select element that places at top of that page
##### Example:
We 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
Well, seems that we need to look more carefully at those libraries that use React-DOM API under the hood
and check how they are compatible with `preact`
#### File usage
Another case is when we need to understand the whole picture why the file was included in the bundle.
The specific files are listed in the table on the left side of the page
To see the whole inclusion tree (up to webpack entry point) you should select specific file with a click on its name.
Than tree will be rendered:
1. inclusion tree
2. reference table with listing all places where that specific file was required and listing all modules that are required by our specific module
[reference table](http://i.imgur.com/Wwn2ICf.png)
##### Example
We want to split our domain logic by pages, before we need to understand on which pages those files
are utilized. Having selected desired module in the table at the right, we are able to see the whole
inclusion tree.
To reduce visual noise use filtering by name(input element at top left corner of the page)
well, now we figured out that desired domain logic file is utilized only on one page and we can start thinking
about code-splitting and inclusion that domain logic file into appropriate chunk
### Additional notes
The 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.