Can manual chunks still be dynamically imported?

[philiprenich]

It may be I am misunderstanding the intention of these features, however, here is my situation.

As a minimal reproduction, I am using npm create vue@latest to create a basic Vue site with Vue Router. The default template has a Home page and an About page. The About page is imported dynamically upon routing.

When I set up my own manual chunks in the Vite config, the manual chunk is loaded from the Home view/route even though none of it will be used.

build: {
    rollupOptions: {
      "output": {
        manualChunks: {
          secondary: ["@/views/AboutView.vue"]
        }
      }
    }
  }

I have used modulePreload true and false, but that just changes load ordering of the JS. The CSS is always requested immediately, with no way to put it somewhere "unblocking". In fact, the chunked CSS is loaded BEFORE the unchunked/primary CSS which is actually bad as opposed to more of a nuisance.

In older versions (Vue2.7 is what I am upgrading from) where Webpack is used, it is possible to set manual chunk names (and put many views into that chunk) and still have them dynamically loaded.

Is it possible in Vite to create manual chunks and still have the benefits of dynamic imports?

Here's a reproduction git repo