Dynamic not work

help
1

Hi,
I’m trying to implement dynamic loading to split the code per page to minimise the main bundle size cause the app is slow…I tried to check on the forum by finding relevant posts and imitate the logic. But the solution is no different than what’s done before. Is there any other thing that needs to be done other than dynamically loading all my components that are assigned to routes?

import React, { lazy, Suspense } from ‘react;
import { Switch, Router, Route } from ‘react-router-dom’;
const MyComponent = lazy(() => import(’./MyComponent’));
…
return (


<Suspense fallback={

Loading…
}>


Thanks

2

Please note you see to be using an old version of react-router. In V6, Switch has been replaced by Routes:

 <Routes>
    <Route ....... />
    // or for your component:
   <Route path='/my-route' element={<MyComponent />} />
   <Route path='*' element={<NotFoundPage />} />  
 </Routes>

I use Loadable for dynamic imports:

import React from 'react'
import loadable from '@loadable/component'
const MyComponent = loadable(() => import(’./MyComponent’))

export default function ParentComponent () {

if (some_condition) {
   return <div>Fallback component</div>
}

return (
    <div>
       Your main thing...
       {/* Your dynamically imported component next... */}
       <MyComponent />
    </div>
)
2 Likes