How to build a separate vendor file for each page in the multi-page mode of vite

[txbo]

I created a multi-page vite framework, but after build it with reference to the official case, all pages share a set of vendor files. In fact, the dependencies of different pages are different.

[txbo]

I found this code in vite, but I don’t know how to overwrite it. Does vite support rollup array type configuration?

// build.ts line 564
function createMoveToVendorChunkFn(config: ResolvedConfig): GetManualChunk {
  const cache = new Map<string, boolean>()
  return (id, { getModuleInfo }) => {
    if (
      id.includes('node_modules') &&
      !isCSSRequest(id) &&
      staticImportedByEntry(id, getModuleInfo, cache)
    ) {
      return 'vendor'
    }
  }
}

[morlay]

rollup plugin could modify this.

export default function esmify(options: esmifyOption): Plugin {
  const cache = new Map();

  const normalize = (id: string): string => {
    if (cache.has(id)) {
      return cache.get(id);
    }

    const parts = id.split("/node_modules/");
    const dirPaths = parts[parts.length - 1].split("/");

    let n = `npm~${dirPaths[0]}`;

    if (dirPaths[0][0] == "@") {
      n = `npm~${dirPaths[0]}~${dirPaths[1]}}`;
    }

    cache.set(id, n);

    return n;
  };

  return {
    name: "rollup-plugin-multiple-vendors",

    outputOptions(o) {
      o.manualChunks = (id: string, api: GetManualChunkApi) => {
        if (id.includes("node_modules")) {
          return normalize(id);
        }
      };
      return o;
    },
  };
}

vite build outputs could be like:

✓ 23 modules transformed.
dist/index.html                             0.68 KiB
dist/static/index.15580252.js               0.95 KiB / gzip: 0.53 KiB
dist/static/npm~react.50915315.js           6.12 KiB / gzip: 2.60 KiB
dist/static/npm~object-assign.cbaaaf7d.js   0.96 KiB / gzip: 0.54 KiB
dist/static/npm~scheduler.3249a885.js       4.58 KiB / gzip: 1.88 KiB
dist/static/npm~react-dom.ff1dceef.js       116.71 KiB / gzip: 37.63 KiB

[PRossetti]

I also need exactly this. I have a react app with vitejs as builder with multiple entry points / pages but vite/rollup is generating only one vendor chunk/bundle with the npm packages for all the entry points instead of having one vendor per entry point / page. Ideally it would be better to have one vendor with all shared dependencies across all entry points and then one extra vendor per page / entry point.

But none of those things are happening, I have been googling and trying things for hours now and haven't figure it out yet.
Webpack is 100% able to do this. If vitejs seriously wants to compete with webpack it should also be able to do the same thing.

Please help!

[VincEnterprise]

Bump, I'm interested in this as well as I'm trying to migrate from vue-cli to vite. However I need the following functionality:

https://gist.github.com/Akryum/ece2ca512a1f40d70a1d467566783219
(each entry has it's own chunk-[app-name]-vendor file)

Related questions have also been asked here:

https://laracasts.com/discuss/channels/vite/how-can-i-split-dependencies-into-a-vendor-file-per-entry-point-without-manually-writing-them

https://stackoverflow.com/questions/76423132/how-can-i-make-vite-split-dependencies-into-a-vendor-file-per-entry-point-withou

If someone could help with this issue it would be greatly appreciated.