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•4w 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•4w ago

Doesn't it depend on the kind of code splitting and tree shaking they're using?

Madaxen86•4w 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.

Gaming

Programming

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