PR #6251 generates a HUGE async-vendor chunk dispite the packages are imported from different async chunks

[QiroNT]

Describe the bug

PR #6251 introduced a separate chunk for async imports to improve cache hits which is great to have.

The problem is it generates a single chunk for all async imports, which results in all packages imported async-ly to be packed into one huge(in my case >1MB) file.

I think it should be at least keyed chunks so packages from different async chunks will be written separately.

vite v2.7.7:

vite v2.7.8:

Reproduction

https://github.com/QiroNT/vite-reps/tree/vite-6251

System Info

System:
    OS: Linux 5.14 Manjaro Linux
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 12.65 GB / 31.30 GB
    Container: Yes
    Shell: 5.1.12 - /bin/bash
  Binaries:
    Node: 17.3.0 - ~/.local/share/pnpm/node
    npm: 8.3.0 - ~/.local/share/pnpm/npm
  Browsers:
    Firefox: 95.0.1
  npmPackages:
    @vitejs/plugin-vue: ^2.0.1 => 2.0.1 
    vite: ^2.7.8 => 2.7.8

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[Shinigami92]

Which tool are you using there? I want to try it out locally and see/compare the chunk sizes.

[QiroNT]

Which tool are you using there? I want to try it out locally and see/compare the chunk sizes.

Just rollup-plugin-visualizer, btw the images are taken from another repo, not the reproduction.

[sanyuan0704]

The critical chunk size may need to be specified for the dynamically imported module, so that the async-vendor is split into different chunks according to the size to avoid excessive chunk size.

[sanyuan0704]

For example, the default minimum chunk size is 200 KB, and the final async-vendor is 500KB, then it will be divided into async-vendor0.js, async-vendor1.js and async-vendor2.js in the end.

[patak-dev]

[email protected] was released with #6251 reverted
It was too big of a change for a patch release, @sanyuan0704 please create another PR addressing this issue and we can work it out for inclusion in a future minor

[sanyuan0704]

[email protected] was released with #6251 reverted It was too big of a change for a patch release, @sanyuan0704 please create another PR addressing this issue and we can work it out for inclusion in a future minor

Okay，i will propose a more specific splitting strategy for async chunk and create a pr again.