Code splitting ineffective due to vendor chunk

[Pajn]

Describe the bug

I use framer-motions m component to lazyload most of the library, however due to the default options of Vite this is entirely ineffective since all of framer-motion ends up in the immediately loaded vendor bundle anyway. By disabling the rollup option manualChunks the code is splitted up as expected.

Reproduction

https://github.com/Pajn/vite-code-split-repro

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

❯ npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers
npx: installed 1 in 0.877s

  System:
    OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 11.85 GB / 30.99 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 89.0
  npmPackages:
    vite: ^2.3.7 => 2.3.

Used package manager: yarn

Logs

See repro

---

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• 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.

[yyx990803]

This seems to only happen because LazyMotion is also imported from the dep so it is considered by the built-in manualChunks function to be actually used in the main chunk.

[illumi520]

this is the reason 🙋

[benmccann]

You can disable it by setting build.rollupOptions.output.manualChunks to undefined (#1683 (comment)). Still, I'm not sure I agree with this default. I guess the idea is that the vendor chunk changes less frequently and will be cached? But it seems to harm initial page load enough that I'm not sure it's a good tradeoff

[danielo515]

You can disable it by setting build.rollupOptions.output.manualChunks to undefined (#1683 (comment)). Still, I'm not sure I agree with this default. I guess the idea is that the vendor chunk changes less frequently and will be cached? But it seems to harm initial page load enough that I'm not sure it's a good tradeoff

for mi this just makes some manual chunks to be included on the main vendor. To be honest, what ends on the vendor bundle is really surprising to me almost all the times. I am doing lazy loading of routes, components and even libraries and a lot of things that I don't expect ends on the main vendor bundle. Many times if a library is lazy-loaded from more than one place it is also included on the vendor bundle.