6

I'm not sure this is even possible, but it looks like some of the moving parts are there.

GOAL: Create a library of single file Vue 3 components that will compile into separate chunks using Vite, and be dynamically/async loaded at runtime. The app itself will load, then load up a directory of individually chunk'd elements to put in a toolbox, so afterward each element could be updated, and new ones could be added by putting new chunks in the same path.

So far, I can create the separate chunks within the vite.config as follows:

...
build: {
  rollupOptions: {
    output: {
      ...buildChunks()
    }
  }
}
...

The buildChunks function iterates over SFC files in the ./src/toolbox path and returns an object like...

{
  'toolbox/comp1':['./src/toolbox/comp1.vue'],
  'toolbox/comp2':['./src/toolbox/comp2.vue'],
  'toolbox/comp3':['./src/toolbox/comp3.vue'],
  ...
}

This all works, but I'm not sure how to make that next leap where the server code dynamically loads all of those generated chunk files without explicitly listing them in code. Also, since the Vite build adds an ID in the file name (e.g. comp.59677d29.js) on each build, referencing the actual file name in the import can't be done explicitly.

So far what I've considered is using defineAsyncComponent(()=>import(url)) to each of the files, but I'd need to generate a list of those files to import...which could be done by building a manifest file at build time, I guess.

Any suggestions? Is there a better approach?

jtalarico
  • 886
  • 8
  • 22
  • ...and yes, I know that each chunk will contain the same dependencies as all others, but it's a small price to pay for the runtime flexibility I'm looking to achieve. – jtalarico Mar 08 '22 at 00:32
  • 1
    update: I was able to eliminate the auto-generated id in the chunk file names using chunkFileNames: '[name].js' – jtalarico Mar 16 '22 at 20:33
  • 1
    have you considered using [Library Mode](https://vitejs.dev/guide/build.html#library-mode) together with build.rollupOptions.output.manualChunks Vite config? – Oswaldo Mar 19 '22 at 00:15
  • Ultimately, the goal is to be able to import an arbitrary component at runtime and have the server provide a list of available components when requested, and the front end would import them each as individual files. I'm creating a front-end UI builder that will have tools/components added over time by putting the built components in a path on the server and would prefer not to build libraries to distribute to each deployed server. – jtalarico Mar 19 '22 at 19:08
  • @jtalarico did you came up with a solution? – Psi May 31 '22 at 12:47
  • Nope. And I'm not sure there is one for this scenario. – jtalarico Jun 01 '22 at 15:10
  • I think you should be looking at Webpack since Vite doesnt seem to put much focus on chunked builds. At least I cant find any info about it. The information to find for Webpack is much bigger. – Flame Jul 26 '22 at 14:11

0 Answers0