#Module analysis

#Introduction

Rsdoctor provides the Module Reference Chain Analysis module, which is mainly used to analyze the dependency tree of a specific Module, i.e., which modules depend on it, similar to Webpack's stats.reasons.

In this module, you can analyze the Module reference chain. If you have the need to split packages or want to see why a certain Module is being imported, you can quickly and clearly locate the reference chain through Module Reference Chain Analysis.

#This section's entry

After clicking on an Assets in the 「Bundle Size」 page, the 「Module Tree」 will be displayed on the right side. Click on the Module to view the reference chain relationship diagram of that Module.

#Glossary

• Reasons: As the name suggests, it means the [reason] why a Module exists. Reasons indicate which Modules import this Module, and the entire Reasons Tree represents the upstream reference chain of this Module, including both direct and indirect parents. Similar to Rspack's stats.reasons.
• Dependencies: The Modules that this Module depends on.
• Bailout Reason: The reason why this Module failed Tree Shaking.

#Reasons dependency tree

#Introduction

The Reasons Tree displays the dependency chain of this Module, showing which other Modules directly or indirectly import it. In this dependency tree, you can view the Bundled Size of the Modules along the dependency chain. You can also click the right arrow > to navigate to the Module Reference Chain Analysis page for that specific Module.

• Parent-child relationship in the dependency tree: The parent node file is the one that is depended upon by the child node file and is therefore bundled into the output. Similarly, the grandchild node file is depended upon by the child node and is bundled into the output, and so on.

• The Usage tag displays the purpose of various module tags.

• The Concatenated tag:

  • The Concatenated tag indicates that the module is a concatenated sub-module. Hover over it to see which main module it is aggregated into. This type of aggregated module cannot be further unpacked, so the specific Bundled Size cannot be determined, only the size of the entire concatenated module can be known.
  • Glossary: A concatenated module is when multiple modules are promoted or concatenated into a closure during packaging. For an explanation of Concatenated Module, refer to the Glossary.

• The ! tag, hover over it to display the detailed path of the module.

#Bailout Reason

#Usage

Bailout Reason shows the reason why this Module failed Tree Shaking.

You can also use MCP for analysis. By asking "Please help me to check why react-dom/client.js can not be tree-shaken?", the tool will help analyze why this module cannot be tree-shaken.

For MCP analysis, see MCP Analysis