2

I'm attempting to convert my React application to lazy load components dynamically to increase the Lighthouse performance score and have been following the React Code Splitting Documentation in order to do so.

Following the documentation, I attempted to switch how components were loaded in the App.js file as shown below:

//Before
import Component from './components/examples/Component';

//After
const Component = lazy(() => import('./components/examples/Component'));

However, when I do this the routes in App.js with Component fail to load as the site gets a 404 error when the server tries to grab http://localhost:3000/App.js . Do I need to add a route to my server to return each component I want to lazy load? There's nothing on the docs about this...

Looking for why this is happening, not a way to redo my App.js routes.

Sean Moody
  • 320
  • 1
  • 2
  • 14
  • can you share you project structure and routes file – Chandan Dec 08 '20 at 13:36
  • It looks like you are getting default 404 route which you may have defined in your routes try going to main route `http://localhost:3000`. – Chandan Dec 08 '20 at 18:21
  • If your are using webpack, have you defined the `output.publicPath` in the config? – johannchopin Dec 09 '20 at 13:13
  • Do you have wrapped your routes with `Suspense` it is necessary? https://reactjs.org/docs/code-splitting.html#route-based-code-splitting – Beso Kakulia Dec 11 '20 at 12:19
  • 1
    show your App.js content! – cl3m3c7 Dec 12 '20 at 20:39
  • I second i-HmD's comment. Further, how are you serving your app. Are you serving app server-side? or client-side? As per React docs, `React.lazy and Suspense are not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.` – Parmandeep Chaddha Dec 13 '20 at 20:10

0 Answers0