How do you find out the chain of import that caused the current file/module to be requested/loaded for HMR?

[Nefcanto]

As a team, we have an administration panel that is dynamic and modular. When all modules are included, we see that more than 2000 files are loaded. Most of them are not necessary for the home page.

The first step to make it faster, is to find out the chain that causes the current request to be made to that module/file.

Using AI we extracted these debug options:

• vite:resolve
• vite:load
• vite:transform
• vite:import
• vite:hmr
• vite:cache
• vite:deps
• vite:config
• vite:spa
• vite:html
• vite:worker
• vite:server
• vite:client
• vite:ssr
• vite:time
• vite:optimize
• vite:plugin
• vite:fs
• vite:build
• vite build
• vite:manifest
• vite:logger
• vite:resolve

But none of them gave us the "chain" that we need. For example, when "/User/Field.jsx" is loaded, we need something like this:

• /User/Field.jsx is loaded, because it's imported from /Author/Form.jsx
• /Author/Form.jsx is loaded, because it's imported from /Author/List.jsx
• /Author/List.jsx is loaded, because it's imported in the routing of the blog module /Blog/Routes.jsx
• /Bog/Routes.jsx is loaded because it's imported in the dynamically created AllRoutes.jsx file
• /AllRoutes.jsx is loaded because we import it in the Routing.jsx
• Routing.jsx is loaded because we import it in the Panel.jsx
• Panel.jsx is loaded because we import in the main.jsx

How can we get that log?

[Nefcanto]

This is the command that we tried and none gave us that import chain:

DEBUG="vite:resolve,vite:load,vite:transform,vite:import,vite:hmr,vite:cache,vite:deps,vite:config,vite:spa,vite:html,vite:worker,vite:server,vite:client,vite:ssr,vite:time,vite:optimize,vite:plugin,vite:fs,vite:build,vite build,vite:manifest,vite:logger,vite:resolve" npm run dev

[hi-ogawa]

vite-plugin-inspect https://github.com/antfu-collective/vite-plugin-inspect visualizes module graph but it might not work well with more than 1000 of modules.

Alternatively, Chrome devtools "request initiator chain" might help. For example, I see something like this in one of my example app:

[Nefcanto]

@hi-ogawa thank you for mentioning the initiator. It seems that Firefox's initiator does not work. In Chrome, it works.