I have a project: link.
The project has router and lazy-components for every page.
Short example router-component:
export const RoutersComponent = () => {
return (
<HashRouter basename={'/'}>
<Routes>
<Route
path="/"
element={<Navigate replace to={routerConfig.log.url} />}
/>
<Route
path={routerConfig.reg.url}
element={<LazyRegistrationPage />}
/>
<Route
path={routerConfig.log.url}
element={<LazyLogginPage />}
/>
</Routes>
</HashRouter>
)
}
Full component router on link.
Short example lazy-component:
Folder src/pages/registration
File index.js
export * from './registration'
export * from './lazy'
File lazy.js
import { Suspense, lazy } from 'react'
import { Loading } from '../../components'
const Registration = lazy(() =>
import('./registration').then((module) => ({
default: module.Registration
}))
)
export const LazyRegistrationPage = () => {
return (
<Suspense fallback={"Loading..."}>
<Registration />
</Suspense>
)
}
Short file registration.js:
export const Registration = () => {
return (
<section className="log">
Registration
</section>
)
}
Full component registration on link
I use library:
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
If i start command:
npm run build
then i will get one file ***.js
But why???
In my short project everything is working:
import { Suspense, lazy } from "react";
import "./App.css";
const A = lazy(() =>
import("./A").then((module) => ({
default: module.A,
}))
);
const LazyA = () => {
return (
<Suspense fallback={"loading..."}>
<A />
</Suspense>
);
};
const B = lazy(() => import("./B"));
const LazyB = () => {
return (
<Suspense fallback={"loading..."}>
<B />
</Suspense>
);
};
function App() {
return (
<>
<div className="App">hello</div>
<LazyA />
<LazyB />
</>
);
}
export default App;
After build I have 4 file ***.js.
I don't understand.
As is often the case, when you ask something that no one wants to understand, you find the answer yourself.
If you make a checkout for this commit "7089bce" in the project in the "main" branch, then you can find the file "index.js" on this path "src/pages/index.js". If shorter:
git clone https://github.com/tyt34/postcomm.git
git checkout 7089bce
vim src/pages/index.js
The contents of which:
// file on path: src/pages/index.js
export * from './all-posts-page'
export * from './all-users-page'
export * from './loggin'
export * from './post-page'
export * from './profile-page'
export * from './registration'
Due to such an import architecture, there was a problem with the lazy loading.
That is, it does not matter that in the end such a page component as:
export const Registration = () => <div>Example</div>
Used in lazy loading as a module, for example:
const Registration = lazy(() =>
import('./registration').then((module) => ({
default: module.Registration
}))
)
export const LazyRegistrationPage = () => {
return (
<Suspense fallback={<Loading />}>
<Registration />
</Suspense>
)
}
The "index.js" file that was shown above crossed out everything.