Main.js is rendered on every page even if I splitted each page into chunks with @loadable/component

[burakkbilginn]

💬 Questions and Help

Main.js is rendered on every page even if I splitted each page into chunks with @loadable/component

Code is below:

import loadable from '@loadable/component';

const Home = loadable(() => import(/* webpackChunkName: 'home' */ './pages/home/Home'));
const Kredi = loadable(() => import(/* webpackChunkName: 'kredichunk' */ './pages/kredi/Kredi'));
const BlogMainpage = loadable(() => import(/* webpackChunkName: 'blogmainpage' */ './pages/blogmainpage/BlogMainpage'));

function App() {
  
  return (
    <>
      {/* <Suspense fallback={<div>Loading...</div>}> */}
        <BrowserRouter>
          <Header />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/blog" element={<BlogMainpage />} />
            <Route path="/kredi" element={<Kredi />} />
          </Routes>
        </BrowserRouter>
   </>
)}

I.e when I open directly www.xx.com/kredi, I see that main.js and kredichunk.js is loaded on chrome's network tab.