[Docs]: Document special import syntax that preserves code splitting in Routes

[cannikin]

Summary and description

You may have a page in a different directory than Redwood's default, and you want to reference it in Routes.js. If you import the file as usual, you cannot code split on it. But, there's a special syntax you can use that does preserve code splitting. Apparently we haven't documented it, but we should! I'd probably put it in the Router docs as its own section so it shows in the table of contents at right.

// breaks code splitting
import { UserLogin } from 'src/custom/pages/UserLogin'

// preserves code splitting
const UserLogin = { name: 'UserLogin', loader: () => import('./custom/pages/UserLogin') }

Thanks for the syntax @peterp!

Are you interested in working on this?

• I'm interested in working on this

[dac09]

Just a headsup that I'm changing this syntax as part of enabling Render modes. It is normally non-breaking, because these loaders are generated automatically for you by Redwood.

I'm not sure where its going to land, but wanted to comment here for visibility.

[cannikin]

/cc @peterp who told me about this syntax!