Proper way of handling lazy loading in DEV

[Gabilabrebi]

Hello

I'm looking for help on how to handle lazy loading properly in dev. My lazy loading works 100% properly in prod, but i've some weird stuff happening in dev. Cojntext : SPA, monorepo, using vite as middleware, Full, TS, no framework, custom router.

Here is how i create routes and make vite aware of them

if (import.meta.hot) {
  import.meta.hot.accept(() => {
    window.location.reload();
  });
}
const routeModules = import.meta.glob('./*staff*.ts');

export const routes = new Map();
type StaffModule = typeof import('./staff.ts');
const staffRoute: Route<StaffModule> = {
  module: routeModules['./staff.ts'],
  page: 'staffPage',
}
routes.set('/staff', staffRoute);

And here is how i route dynamically

if (import.meta.env.DEV) { // Required to prevent vite double importing entry point + route
      let module: any;
      if ((globalThis as any).__staff__ && (path === '/staff' || path === 'user-selection')) {
        module = (globalThis as any).__staff__;
      }
      else {
        module = await route.module();
      }
      const pageFunction = module[route.page];
      pageFunction(options.data);
}
else {
      const module = await route.module();
      const pageFunction = module[route.page];
      pageFunction(options.data);
}

As you can see i already had to make prod/dev conditions here to make it work.

In production, after initial loading, i also preload all module in idle using this

if (import.meta.env.PROD) {
  // Preload module based on url to avoid having to wait for authentication to downloadit
  const route = routes.get(window.location.pathname);
  if (route) route.module(); // only in production
  // On iddle, preload all routes to avoid lazy loading
  const preloadModules = () => routes.values().forEach(route => route.module());
  if ('requestIdleCallback' in window) {
    requestIdleCallback(preloadModules);
  }
  else { // fallback if requestIdleCallback is not supported
    setTimeout(preloadModules, 5000);
  }
}
else {
  for (const route of routes.values()) {
    if (route.page !== 'staffPage' && route.page !== 'userSelectionPage') { // filter because entry point
      //route.module();
    }
  }
}

But as you can see i also had to create conditional rule here, because if i don't, modules are loaded twice.

This setup works like 99% of time, but i sometimes have weird stuff hapening like :

• a css file called from a module not being loaded => no style at all on specific page
• a top module level variable being undefined (even if loaded ans defined properly on page load)

I'm not sure how to fix all this and make it flawless for both front and dev. Any help would be appreciated :)

[Gabilabrebi]

Anyone experiencing same troubles?