[Question] How to enable tree shaking of components ?
geminigeek opened this issue · 6 comments
hi,
currently all components are loaded in final build, how can we build only what we are using ?
I have the same question and am wondering if we need to configure unplugin for primevue manually.
Right now i exclude loading unused components via options like so:
It would be nice to have something which would automate it though.
components: { exclude: ['Galleria', 'TreeTable', 'PickList'], }, directives: { exclude: ['Ripple'] }
its better if its implemented with vite unplugin, the resolver is already there https://github.com/unplugin/unplugin-vue-components/blob/main/src/core/resolvers/prime-vue.ts , this way we don't have to make all components global, i have no idea how vite works but seems a good option
Are you looking for this ? It's manual treeshaking but already better than no treeshaking: https://primevue.org/nuxt/#components
// nuxt.config.ts
primevue: {
components: {
include: ['Button', 'DataTable']
}
}
You need to add
primevue: {
components: {
include: [],
}
}
to nuxt.config.js.
From there, you can either add the components you need to your config as @Yves852 demonstrated, or you can import them directly where you use them (no nuxt auto-import).
Hello,
I added autoImport: true | false(default)
to new @primevue/nuxt-module
plugin. Please see;
primefaces/primevue#5935
Best Regards,