code splitting of routers?

I have recently focused on developing the Svelte project using Parcel… By the way, I wonder if the code splitting of parcel can be applied to the routes index map of spa router.

import Home from './routes/Home.svelte'
import Book from './routes/Book.svelte'
import NotFound from './routes/NotFound.svelte'

const routes = {
    '/': Home,

    // Might be like this?
    '/author/:first/:last?': async () => await import('./routes/Author.svelte'),

    '/book/*': Book,
    '*': NotFound
}

[ItalyPaleAle]

Thanks for that. I like your solution, and I think it looks very elegant. I’m happy to include a note in the Advanced Usage readme. Let’s continue in #36

[ItalyPaleAle]

Hi @hmmhmmhm I have not tried this, but it should work.

However, what you need to keep in mind is that the async function would be executed when the route object is defined. So, yes, you’d get code splitting – but all routes would be loaded at the same time, on page load.

If you want true async loading, then a possible way is to add to the router a route whose sole job is to load the Author route asynchronously.

If you want to modify this router to support async route loading, you’re welcome to submit a PR 😃