Optimizing Conditional Component Loading for Improved Performance
Unanswered
European anchovy posted this in #help-forum
European anchovyOP
I have a large project that generates pages and content based on CMS data. This requires importing all available components into a central file and conditionally deciding which to return based on the CMS input.
However, the default webpack configuration fails to recognize that some code is unnecessary. As a result, the final pages always include all js and css related to all components, even though only the returned components should be loaded. This significantly impacts our Lighthouse score, making it very poor. Tests confirm that the issue is related to the unused code marked as critical by next.
How would you fix this problem? The solution must work on the server side
However, the default webpack configuration fails to recognize that some code is unnecessary. As a result, the final pages always include all js and css related to all components, even though only the returned components should be loaded. This significantly impacts our Lighthouse score, making it very poor. Tests confirm that the issue is related to the unused code marked as critical by next.
How would you fix this problem? The solution must work on the server side
2 Replies
Netherland Dwarf
This sounds more like a job then asking for help, and without seeing the code for this file it can be tricky to tell exactly how to optimize it besides lazy loading
European anchovyOP
@Netherland Dwarf To my understanding, lazy loading is a client-side thing. What I’m asking for is how to force split the modules on the server. Import two server components and try to conditionally render just one. You’ll get JS and CSS loaded for both in the browser