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.

[KieranP]

Here is how we ended up approaching this:

1. For every page in our app, we added an entrypoint that imported the correct file. For example, entrypoints/views/users/show.ts would contain the following:

window.SvelteView = import('@views/users/show.svelte')

2. We import that entrypoint in our application layout (rails powered app using vite-ruby plugin):

<%= vite_typescript_tag(
  "entrypoints/views/#{params[:controller]}/#{params[:action]}", # e.g. entrypoints/views/users/show
  'application',
) %>

3. When the pages loads, we run the following in our application.ts file:

const componentImport = await window.SvelteView
mount(componentImport.default, {
  target: document.getElementById('main')
})

While a little bit more boilerplate code, this has enabled us to achieve the following:

1. Vite bundles each entrypoint separately, resulting in slightly faster compile time (since if code in only one entrypoint changes, vite doesn't try to compile everything again like it used to) and smaller bundle size per page
2. We no longer have a central views glob list in application.ts that exposes the structure of our application to anyone who wanted to take a peek. Each page contains only what it needs to

This is the approach we went with and it seems to be working well. But keen to hear any other approaches people have taken or how the above might be able to be improved.