How to create multipe bundle with multiple entrypoint

[Et7f3]

I tried:
multiple output like https://stackoverflow.com/a/74657855/7227940
It build 2 folders with multiple entry point repeated two times:

✓ 36 modules transformed.
dist/app1/app1.html                    0.54 kB │ gzip:  0.33 kB
dist/app1/app2.html                    0.54 kB │ gzip:  0.33 kB
dist/app1/assets/react-CHdo91hT.svg    4.13 kB │ gzip:  2.14 kB
dist/app1/assets/index-DiwrgTda.css    1.39 kB │ gzip:  0.72 kB
dist/app1/assets/app1-Cj4wREUJ.js      0.16 kB │ gzip:  0.16 kB
dist/app1/assets/app2-CIfDa6Ia.js      0.19 kB │ gzip:  0.17 kB
dist/app1/assets/index-VGQVgq-8.js   143.33 kB │ gzip: 46.09 kB
dist/app2/app1.html                    0.54 kB │ gzip:  0.33 kB
dist/app2/app2.html                    0.54 kB │ gzip:  0.33 kB
dist/app2/assets/react-CHdo91hT.svg    4.13 kB │ gzip:  2.14 kB
dist/app2/assets/index-DiwrgTda.css    1.39 kB │ gzip:  0.72 kB
dist/app2/assets/app1-Cj4wREUJ.js      0.16 kB │ gzip:  0.16 kB
dist/app2/assets/app2-CIfDa6Ia.js      0.19 kB │ gzip:  0.17 kB
dist/app2/assets/index-VGQVgq-8.js   143.33 kB │ gzip: 46.09 kB
✓ built in 2.53s

repro: https://stackblitz.com/edit/vitejs-vite-edgga2?file=dist%2Fapp1%2Fassets%2Fapp2-CIfDa6Ia.js

I then tried to try with templated name and I got:

❯ vite build
vite v5.2.8 building for production...
✓ 36 modules transformed.
dist/[name]/app1.html                    0.54 kB │ gzip:  0.33 kB
dist/[name]/app2.html                    0.54 kB │ gzip:  0.33 kB
dist/[name]/assets/react-CHdo91hT.svg    4.13 kB │ gzip:  2.14 kB
dist/[name]/assets/index-DiwrgTda.css    1.39 kB │ gzip:  0.72 kB
dist/[name]/assets/app1-Cj4wREUJ.js      0.16 kB │ gzip:  0.16 kB
dist/[name]/assets/app2-CIfDa6Ia.js      0.19 kB │ gzip:  0.17 kB
dist/[name]/assets/index-VGQVgq-8.js   143.33 kB │ gzip: 46.09 kB
✓ built in 964ms

repro: https://stackblitz.com/edit/vitejs-vite-wyabvg?file=vite.config.js

What I was expecting was something like:

dist/app1/index.html or dist/app1/app1.html
dist/app1/assets/... # assets only useful for app1
dist/app1/assets/index-DiwrgTda.css
dist/app1/assets/index-VGQVgq-8.js # Contains only components required by app1
dist/app1/assets/app1-Cj4wREUJ.js # since we have a bundle that contains only component of app1, we can get rid of it


dist/app2/index.html or dist/app2/app2.html
dist/app2/assets/... # assets only useful for app2
dist/app2/assets/index-DiwrgTda.css
dist/app2/assets/index-VGQVgq-8.js # Contains only components required by app2
dist/app2/assets/app2-CIfDa6Ia.js # since we have a bundle that contains only component of app2, we can get rid of it

Why I have this requirement is:
I have two (in fact 3 but it should be same issue) side of the same app (so it share many components). The user interface have less component used so having two bundle allow him to load quicker and for admin interface it has component/page we don't display so useless code. We host the two interface on two different server (network isolation on top of other security mechanism)

Today I have a single output build: I copy asset folder (and useless code) to both servers and app1.html to index.html on server1 and app2.html to index.html on server2.

I say uselss code because in my app I see (but wasn't able to reproduce in stackblitz):

import {
  r as o,
  P as pn,
  j as C,
  H as ko,
  c as ha,
  a as Pn,
  u as ya,
  o as wa,
  b as Si,
  q as za,
  _ as Kr,
  X as Ei,
  B as $a,
  I as Kt,
  D as w,
  C as _t,
  d as pt,
  e as Ut,
  f as In,
  g as jo,
  h as Oi,
  i as Fn,
  k as Ft,
  l as Qn,
  Z as Rn,
  m as Ca,
  n as Pe,
  p as Rt,
  O as y,
  s as St,
  R as ln,
  E as Pi,
  t as Lo,
  v as Ao,
  w as kr,
  x as Bo,
  F as or,
  T as xa,
  y as br,
  z as _o,
  A as wn,
  G as vn,
  J as sr,
  U as zo,
  K as lr,
  L as On,
  M as Ri,
  N as Ii,
  Q as Di,
  S as Mi,
  V as Ni,
  W as Ti,
  Y as Fi,
  $ as kn,
  a0 as Hn,
  a1 as ki,
  a2 as ji,
  a3 as Li,
} from "../bundle-mjs-1h9Euwkg.js";

and

import {
  a4 as P,
  L as j,
  u as _,
  j as e,
  a5 as C,
  H as R,
  B as v,
  a6 as I,
  M as w,
  N as S,
  Q as k,
  S as M,
  V as q,
  W as V,
  Y as A,
  a2 as E,
  a3 as B,
} from "../bundle-mjs-1h9Euwkg.js";

I see L being imported in both app1.js and app2.js (so fine if it is shared in same file)
I see a4, a5, a6 only in app2.js and a1 only in app1.js (so a1 is useless for app2.js and the other is useless for app1.js)
Ideally we would have one bundle for component strictly in both app and side bundle only for app1 and one another for app2