This is some of the code I'm using in my React app. My routes are written using react-router-config which allows me to keep a centralized way so I know where to go always in order to modify or add some.
const routes = [
{
component: Root,
routes: [
{
path: "/",
exact: true,
component: Home
},
{
path: "/child/:id",
component: Child,
routes: [
{
path: "/child/:id/grand-child",
component: GrandChild
}
]
}
]
}
];
Then, let's say the Child component is dinamically imported:
const Child = lazy(() => import('./Child'));
I would expect that the generated chunk includes Child, its imports/dependencies and the GrandChild and its imports/dependencies as well; but the reality is that the output is a tiny (1kb) file that includes only the lines of this component (Child).
How could I make webpack chunk all that matters for /child/:id
route?
Given the lack of solutions out there for such an important feature (I have been searching everywhere for 3 days now), I ended up doing it kind of manually.
Webpack allows to specify the name of the chunk that a dynamic import will generate. If you use the same name for all the relevant components involved in a feature (if features are your approach to chunking), then you can do something like this:
And the result will be chunks like this (notice the 2 chunks above the one in yellow, result of the code you see above):
This is something that is worth sharing and a way to create chunks that make sense. My main chunk is way lighter and the vendor one as well, so we can provide a progressive experience and cache the resources that will be used again and again by the user.
I hope I help someone out there.