I have many Vue components like the following:

<template>
  <CommonChild :content="content" />
</template>

<script>
import CommonChild from '@/views/CommonChild.vue';
import { UniqueChild1 } from '@/library.js';

export default {
  name: 'Example1',
  components: {
    CommonChild
  },
  computed: {
    content: function () {
      return {
        component: UniqueChild1
      };
    }
  }
};
</script>

Each has their own lazy-loaded route. The CommonChild is used in all of them, so it is code split out appropriately. But the UniqueChild1 is a different import in each Vue file. The component’s imported from the library.js file are only ever used by one component each. But the build always produces a large library.js bundle. So no matter which route I go to, it has to load the entire library (2MB) before the page can load and only use a small part of the library on the specific page.

The outcome is essentially:

site/assets/Example1.js         0.6 kB
site/assets/Example2.js         0.7 kB
site/assets/Example3.js         0.9 kB
site/assets/Example4.js         0.8 kB
...
site/assets/CommonChild.js      1.0 kB
site/assets/index.js          500.0 kB
site/assets/library.js      2,000.0 kB

Where what I want is this:

site/assets/Example1.js        40.0 kB
site/assets/Example2.js        80.0 kB
site/assets/Example3.js        90.0 kB
site/assets/Example4.js        25.0 kB
...
site/assets/CommonChild.js      1.0 kB
site/assets/index.js          500.0 kB

How do I force Vite to break up the library, so that the parts being imported by the routes live in that route’s chunk?

• Vue 3.5
• Vite 5.4