Not found, pending, and error components are not automatically code split

[reihwald]

Which project does this relate to?

Router

Describe the bug

It is possible to code split the notFoundComponent, pendingComponent and errorComponent when manually code splitting using the .lazy.tsx method. This for example makes sense if a popup with a large bundle footprint that I do not want in my main bundle is displayed by the route component and if the not found or error components should also display a popup.

Automatic code splitting however includes these three component types in the main bundle.

Your Example Website or App

https://stackblitz.com/edit/github-8suvfc?file=src%2Froutes%2Fabout.tsx

Steps to Reproduce the Bug or Issue

• Run npm run build to get a baseline
• Go to the about.tsx file and comment out one of the three not code split components
• Run npm run build again
• The main bundle size has increased by about 100kB

Expected behavior

I'd expect to have the possibility of automatically code splitting the not found, pending, and error components.

Or is this maybe by design and should only be active if explicitly asked for?

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Not of interest
• Version: Not of interest

Additional context

No response

[schiller-manuel]

this is not implemented right now, but could be done for sure. reach out on discord for further discussions as this feature is quite involved.