Code splitting: how to avoid a zillion small files when using React.Suspense?

[fatso83]

So my app is composed of a about 30 different routes, of which only a handful is really used, so it made sense to me to avoid letting the user need to parse all the unneeded cruft for the normal worflows. And so I converted most import ScreenA from ./screen/Atoconst ScreenA = React.lazy( () => import('./screen/A') )`. This worked! At least in the sense of "I do not have two big chunk of js anymore".

The downside was that all files under a route is now downloaded separately. I was assuming that each route would get its own bundle, but not so. Now I have vender-bundle.js, main-bundle.js and foo.js, bar.jsx, some-random-component.jsx, etc. Not sure this is an improvement.

How can I ensure the routes are assembed into bigger chunks?

[IGx89]

Given how old this question is I'm not sure if this'll be of any help, but we recently ran into an issue with too many chunks when using async imports (Vue 3 async components) and used the following (added to vite.config.ts) to tame it:

  build: {
    rollupOptions: {
      output: {
        manualChunks(id: string) {
          if (id.includes("node_modules")) {
            return id.split("/node_modules/").pop()?.split("/")[0]; // or simply return 'vendor' for a single vendor chunk
          }
        }
      }
    }
  },

Tested with Vite 4.0.4

[fatso83]

Hi, thanks! This is definitely of help (still 🙈)

[sk-roofr]

I am having a problem as well. It created each imported file as chunks and the load speed was really slow.

[mauriciolcs]

@sk-roofr Did you fix that? i have same problem

[AdhamMoussa]

@fatso83 @sk-roofr did you fix that?

[fatso83]

Nope. Never tried out the suggestion. Not relevant for my use case