tldr:
Check the repo - common.js includes all dependencies, even though, only one is used on the respective page.
- http://localhost:3000/components/ComponentOne
- http://localhost:3000/components/ComponentTwo
Livedemo: click here
More Details:
I have an app (find attached a grossly simplified version) where based on a user input a different component is rendered. Finding the component to be rendered happens via a component-map. It makes sense that the common.js includes all dependencies for the switcher page, where both components have to be accessible (and thus their dependencies). But it does not make sense for the individual pages to include the respectively other dependency.
To summarize:
- I want to be able to have a large group of components, that can are rendered based on a user's input. It is not feasible for my use-case to serialize and deserialize (as shown here) them as the components are wildly different and require different dependencies
- I also want to render every component out to its own statically generated page, where I retrieve additional SEO information from a database. In this case, however, I only want to load the required dependencies for the particular component at hand.
http://localhost:3000
Selecting ComponentOne results in:
Selecting ComponentTwo results in:
from Next.js bundle size is exploding as a result of dynamic component lookup, how to solve?



No comments:
Post a Comment