[Vite Discussion] Avoid the re-digging overhead caused by overwriting CJS package

[Zheeeng]

Hi, Anthony.

Thx for your effort on Vite and this plugin, I'm not sure there is the right place to discuss, I'd like to move this issue.

I encountered a problem that may also happen in your use cases. I'm asking for solutions to bypass Vite's mechanism after applying the Vite plugins to write module importing.

The concrete behavior is: Once auto-import brings CJS module importing, Vite triggers dependencies discovery.

A real-world huge scale application may contain enormous unbundled CJS modules and them also dependences on other CJS modules. Vite provides us the pre-bunding at development mode, under the wood, it leverages CJS lexer to analyze and rewrite them to ESM format. It doesn't be friendly to the codes which are rewritten by Vite's plugin and bring unanalyzed CJS importing.

To explain this problem, there is a reproduction using the auto-import plugin for Vite: https://github.com/zheeeng/vite-auto-import-cjs-package.

At the first time startup without .vite cache, after the pre-bunding finished, the console reports new dependencies are founded, seems like some CJS modules are nearly injected and therefore re-triggers chunk bundling.

My personal project run into this case repeatedly and kept reloading the page for 10+ minutes at the first time startup because there are a lot of CJS modules that are dependent indirectly.

There is also another minimal reproduction to clarify the issue is caused by the CJS module importing statements: https://github.com/zheeeng/vite-inject-importing-statemetns. See the bootstrap file inject CJS by plugin vs pixi file write them manually.

Coz I'm unfamiliar with the source code of Vite, I'm asking here if it's possible to:

1. Change some behaviors of Vite to make the pre-bunding digging dependencies process considers the affection of plugins rewriting import statements
2. Allow the plugin to write optimizeDeps before dev server pre-bunding is finished, we can explicitly tell pre-bunding these imported CJS modules through plugins should be handled.
3. Add features to vite-plugin-optimize-persist to support nested dependencies declaration.

Let me explain the last two suggestions,

The second point requires some prerequisite work, it seems impossible to achieve, we can't discover CJS dependencies before analyzing files.

The third point requires post-work. We still suffer the long-time dependencies re-discovery, but we can share the optimizeDeps to other team members. I'm using morepo to organize my project, they are ESM modules but import CJS modules nestly, vite-plugin-optimize-persist relieves the pain of manually maintaining optimizeDeps. But it also adds the CJS modules which are under sibling repos. I pull-requested a feature using the filter option to reject no-owned dependencies be added, see antfu/vite-plugin-optimize-persist#4, becoz the Vite startup process report them can't be resolved, see antfu/vite-plugin-optimize-persist#3. Actually, I need them to be declared in optimizeDeps with nested-link symbol >, as this chapter says: https://vitejs.dev/config/#optimizedeps-exclude.

There is related issue opened in vite side: vitejs/vite#6677
and a discussion vitejs/vite#6775

I would be grateful if I could get any help or suggestions from you or others who are interested in it.

[Zheeeng]

Here I post a screenshot to show how horrible the DX is:

[Anthony Fu]

I guess vitejs/vite#6758 could improve the experience quite a lot. It could be great if you can pull the branch and build it to test with your repo. Providing your feedback to the PR will help it move faster.

[Zheeeng]

vitejs/vite#7379 solved my problem.