Apply Code Splitting in Ecommerce Mern stack?

Question

I am building an E-Commerce MERN Stack Web Application. The loading time of my Home Page as tested by Lighthouse is more than 12s. I have hence posted the App.js file and my main main homepage.js file. How can I implement code splitting on my homepage.js file (using Lazy-Suspense method o any other)?

homepage.js


    import React, { Component } from 'react';
    import Header from '../header/header';
    import About from '../about/about';
    import Services from '../services/services';
    import Footer from '../footer/footer';
    import Navbar from '../navbar/navbar';

    export default class Homepage extends Component {
        state = {
            response: '',
            email: '****.com',
            password:'****',
            message:'',
          };

      render() {
        let loggedIn = this.props.loggedIn;
        console.log(loggedIn)
        return (
            <div className="App">
            <Navbar />
            <Header resumeData={{name:this.state.email,}}/>
            <Services resumeData={{name:this.state.email,}}/>
            <About resumeData={{name:this.state.email,}}/>
            <Footer resumeData={{name:this.state.email,}}/>
            </div>
            );
        }
      }



App.js

    import React, { Component } from 'react';
    import { BrowserRouter, Route, Switch } from 'react-router-dom';

    import Homepage from './components/homepage/homepage';
    import LogIn from './components/login/login';
    import SignUp from './components/signup/signup';
    import Reset from './components/reset/reset';
    import Account from './components/account/account';
    import Verify from './components/verify/verify';
    import Shop from './components/shop/shop';
    import Cart from './components/cart/cart';
    import Checkout from './components/cart/checkout';
    import Admin from './components/admin/admin';
    import Order from './components/order/order';
    import Subscription from './components/order/subscription';
    import Subscribe from './components/subscribe/subscribe';


    class App extends Component {

        render() {
          return (      
             <BrowserRouter>

                  <Switch>
                   <Route path="/" component={Homepage} exact/>
                   <Route path="/shop" component={Shop} />
                   <Route path="/cart" component={Cart} />
                   <Route path="/checkout:what" component={Checkout} />
                   <Route path="/subscribe" component={Subscribe} />
                   <Route path="/order:oId" component={Order} />
                   <Route path="/subscription:sId" component={Subscription} />
                   <Route path="/login" component={LogIn}/>
                   <Route path="/admin" component={Admin}/>
                   <Route path="/signup" component={SignUp}/>
                   <Route path="/reset" component={Reset}/>
                   <Route path="/account" component={Account}/>
                   <Route path="/verify/:token" component={Verify}/>
                 </Switch>
            </BrowserRouter>
          );
        }
      }

      export default App;

score 1 · Answer 1 · answered Jun 07 '20 at 08:42

this how you code split your react js app:

import React,{lazy,Suspense} from 'react'

const Child = lazy(()=>import('./ChildComponent'))

const Parent = ()=> <Suspense fallback={<Loader/>}><Child/></Suspense>

here is full detailed explanation : React Code splitting

Apply Code Splitting in Ecommerce Mern stack?

1 Answers1