S
SolidJS•3mo ago
Josesito

can I import a `named export` while lazy loading the `default export`?

Not sure how lazy loading works, I want to ask if this breaks lazy loading: 
export const path = "/login"
export default (function LoginScreen() {...}) satisfies Component
export const path = "/login"
export default (function LoginScreen() {...}) satisfies Component
import { path as loginPath } from "#route/login" // this import is outside the `lazy()` function, is this ok?

const routes = [{
    path: loginPath,
    component: lazy(() => import("#route/login")),
}]
import { path as loginPath } from "#route/login" // this import is outside the `lazy()` function, is this ok?

const routes = [{
    path: loginPath,
    component: lazy(() => import("#route/login")),
}]
3 Replies
Madaxen86
Madaxen86•3mo ago
Well this doesn’t make sense. Since importing on top level will result in the components code being bundled to the file, so there’s no point of lazy loading it then because it’s already loaded.
alfredomm
alfredomm•3mo ago
Doesn't it depend on the kind of code splitting and tree shaking they're using?
Madaxen86
Madaxen86•3mo ago
Well if your app root imports a component. And the app root is used in any route. Then lazy loading the same component on a specific route does not reduce the base bundle. But give it a try and check the bundle. Then you know for sure.

Did you find this page helpful?