Yves852
commented
3 months ago Same partial answer: https://github.com/primefaces/primevue-nuxt-module/issues/56#issuecomment-2049843223
If you know the total list of Primevue's components/directives you use it may be much more efficient to include what you need instead of excluding everything else.
For your specific problem maybe wrapping a Primevue component in a project component such as components/MyComponent.vue and prefixing it with lazy <LazyMyComponent /> can help you but it doen't guarantee it will not be bundled. Code-splitting and lazy-loading is something I'm not good at yet.
Some hints:
Code splitting: Nuxt automatically splits your code into smaller chunks, which can help reduce the initial load time of your application. https://nuxt.com/docs/getting-started/introduction#automation-and-conventions
By using the Lazy prefix you can delay loading the component code until the right moment, which can be helpful for optimizing your JavaScript bundle size. https://nuxt.com/docs/guide/directory-structure/components#dynamic-imports
mertsincan
I'm seeking to enhance the initial load time of my website. As it stands, upon accessing the site, all components are loaded by default, including those not utilized on the current page.
Is there a method to prevent components that are not required on a specific page from being loaded at all?
Until now, my approach has involved explicitly excluding certain components to prevent them from being bundled in the build, as shown below:
However, this technique does not address the core issue; it merely omits these components from the build. It doesn't prevent the loading of unnecessary components on pages where they are not used.