Best practices for large apps that import dynamic files at runtime

[KieranP]

I'm looking for advice on what the best way to support an application with 100s of routes is, each one needing it's own top level view file, but doing so in way that can be references at runtime without bundling all references?

Here is our current setup, frontend is vite/svelte (not SvelteKit), served through Rails application that renders a svelte layout file (which in turn imports application.js and contains a <div id="main"></div>).

Our app maps URL paths to svelte files:
/admin/users -> views/admin/users/index.svelte
/admin/users/ID -> views/admin/users/show.svelte
etc

In our application.ts, we have the following:

const viewPaths = import.meta.glob('@views/**/*.svelte')
const mappings = Object.fromEntries(
  Object.entries(viewPaths).map(([path, proxy]) => {
    const regexp = /([\w\/]+)\.svelte$/
    const matches = regexp.exec(path)
    const name = matches?.[1]
    return [name, proxy]
  })
)

This provides us a nice mapping at runtime:

const mappings = {
  'admin/users/index': () => import('index-CMTzglRH.js'),
  'admin/users/show': () => import('show-7b8Y5qMv.js'),
  ...
}

Our application can then read the URL path, get the import from the mapping, and render it (in reality, a bit more complicated than below, but hopefully you get the idea).

const mapping = mappings[window.location.path]
const component = (await mapping()).default

mount(component, {
  target: document.getElementById('main')
})

Now all of this works great, and has served us well for years. However, we're reaching a point where the creation of the views mapping object is quite large (100s of routes). Not only does this result in a large initial download, but exposes our entire underlying app structure on every page, which is not ideal.

The solution I'm investigating at the moment it to make each view file a Vite entrypoint so it is compiled without needing to use the import glob, but then without the mapping, we're not able to work out the path on the frontend because the final file is hashed, and our frontend can't know that without again adding some sort of mapping in that exposes all routes. We need a solution that doesn't need to fetch/hardcode each frontend file into the source code.

So this is where we're at and wondering how others have been able to solve this issue.