After initializing a fresh Vue application with the command npm create vue, I implemented a functionality where the app fetches a configuration at runtime and extracts a component name from it. These dynamic components reside in a directory called "pluggables."
.
└── src
├── App.vue
└── pluggables
├── ThisFoo.vue
└── ThatBar.vue
Essentially, the App.vue file performs the following actions:
<script setup lang="ts">
import { onMounted, shallowRef, defineAsyncComponent } from "vue";
const pluggableComponent = shallowRef();
onMounted(() => {
// fetching configuration
const componentName = "ThisFoo"; // extracted from configuration
pluggableComponent.value = defineAsyncComponent(() => import(`./pluggables/${componentName}.vue`));
});
</script>
<template>
<div>Showing Pluggable below:</div>
<component :is="pluggableComponent" />
</template>
During build time, I am aware of the components required at runtime and those that can be considered as "dead code" based on the configuration. Is there a method to instruct Vite to exclude unnecessary components from the build?
For instance, excluding the entire pluggables directory while including specific components from it:
vite build --exclude ./src/pluggables/** --include ./src/pluggables/ThisFoo.vue
Alternatively, I could devise a custom Vite build function to execute during the CI/CD process and provide an array of component names to process.