SolidJS•3mo ago

Solid Router - Lazy import section of site in one bundle / lazy add routes

I'm using the Solid Router and have sections of the site that are "First Time Users" or "Settings Pages" that are big pieces of the site but I'd like to lazy load them as one bundle. Is there a way to section off the Routes so const FTI = lazy(() => import("./pages/FTI")); <Route path="/fti" component={FTI}> FTI component could have many imports for other components and add to the router additional routes not defined in the index? Now that I'm asking this I think my question is can my index page have Router and then inside of a lazy loaded Page I can add additional Routes? Thanks.

3 Replies

chiefcllOP•3mo ago

Where FTI would have additional sub routes and pages.... <Route path={'/language-select'} component={SelectLanguagePage} /> <Route path={'/select-setup'} component={SelectSetupPage} />

a𒈙𒈙𒈙•3mo ago

you could try

import { lazy } from 'solid-js';
import { Routes, Route } from 'solid-app-router';

const FTI = lazy(() => import('./pages/FTI'));

function App() {
  return (
    <Routes>
      <Route path="/fti" component={FTI} />
      {/* Your other routes */}
    </Routes>
  );
}

export default App;

import { lazy } from 'solid-js';
import { Routes, Route } from 'solid-app-router';

const FTI = lazy(() => import('./pages/FTI'));

function App() {
  return (
    <Routes>
      <Route path="/fti" component={FTI} />
      {/* Your other routes */}
    </Routes>
  );
}

export default App;

and in your pages/FTI put

import { lazy } from 'solid-js';
import { Routes, Route } from 'solid-app-router';

const FTIComponent = lazy(() => import(/* Your FTI component here*/));
const FTIComponent2 = lazy(() => import(/* Your FTI component here*/));

function FTI() {
  return (
    <Routes>
      {/* Your routes */}
    </Routes>
  );
}

export default FTI;

import { lazy } from 'solid-js';
import { Routes, Route } from 'solid-app-router';

const FTIComponent = lazy(() => import(/* Your FTI component here*/));
const FTIComponent2 = lazy(() => import(/* Your FTI component here*/));

function FTI() {
  return (
    <Routes>
      {/* Your routes */}
    </Routes>
  );
}

export default FTI;

egg•3mo ago

users_and_settings.ts

export { default as Users } from 'src/users'
export { default as Settings } from 'src/settings'

export { default as Users } from 'src/users'
export { default as Settings } from 'src/settings'

router

<Route component={lazy(() => import('src/users_and_settings').then(v => ({ default: v.Users })))

<Route component={lazy(() => import('src/users_and_settings').then(v => ({ default: v.Settings })))

<Route component={lazy(() => import('src/users_and_settings').then(v => ({ default: v.Users })))

<Route component={lazy(() => import('src/users_and_settings').then(v => ({ default: v.Settings })))

Creates 1 chunk

Gaming

Programming

Solid Router - Lazy import section of site in one bundle / lazy add routes