Reduce page chunk size by loading the component only that is required

Question

I have a NAV header component called GlobalHeaderV2.tsx which has a Search component. Currently on page load both the components are being rendered increasing the page size.

Search Component renders the icon (Pic 1) and on click the auto complete suggestion (Pic 2). Icon needs to render on initial page load but the auto complete is not required until the user interaction.

Please guide me on how i can address this. Should i separate the icon and auto complete into its own component and then lazy load the auto complete?

Inside SearchComponentV2.tsx file

export default function SearchComponentV2(props) {
return (
    <ThemeProvider theme={theme}>
      {(!desktopSearchComponent) && <div className={classes.searchIconWidth} style={{ display: 'inline-flex'}}>
        <ListItem aria-label='Search directv.com' onClick={toggleDesktopSearch} button={true} className={`${classes.focusonbtn}`}>
          <ListItemIcon className={`${classes.collapsebtn}`} onClick={toggleDesktopSearch}>
            <span style={{display: 'inline-flex'}}>
              {setSVGLogoAsset(isLightTheme?icons.SearchDarkIcon:icons.SearchIcon,classes.iconSize)}
            </span>
          </ListItemIcon>
        </ListItem>
        <Drawer anchor={'right'} open={drawerOpen} 
          style = {{zIndex:3000}}
          PaperProps={{
            style: {
              alignItems: isMobile?'normal':'center',
              width: isTablet?'100%':'50%',
              paddingLeft: '20px',
              paddingTop:'15px',
              paddingRight:'10px',
              height:'100%'
            }
          }}>
          {renderSearchComponent()} //Auto Complete Component
        </Drawer>
      </div>}
    </ThemeProvider>
}

Inside GlobalHeaderV2.tsx file

import SearchComponentV2 from "../search-app/src/SearchComponentV2";

const createLayout = (data: any, logoData?: any, langSupport?: any) => {
      !data?.left?.length && raiseError('LAYOUT-LEFT-CREATELAYOUT');
      !data?.right?.length && raiseError('LAYOUT-RIGHT-CREATELAYOUT');
      return (!props.skinnyGnav && (
        <List
          component="nav"
          role="navigation"
          aria-label="Main Menu"
          data-testid={`header-main-list_${genUniqueUUid(10)}`}
          className={`${classes.inlineFlex} ${classes.desktop}`} style={{ display: 'flex', alignItems: 'center', width: '100%', height: '100%', paddingBottom: (navData?.options?.styles?.menuContainerPadBottom ? navData?.options?.styles?.menuContainerPadBottom : null) }}
        >
          <div className={`${classes.desktop} ${classes.marRt12} `} style={{ display: 'inline-flex', alignItems: 'center' }} >

            {data.right != undefined && data.right.length && createLeftRightTopMenus(data.right, 'right')}
            {(navData.options && navData.options.showSearch) ?
              <div className={classes.searchBarStyles}>
                <div style={{ display: 'inline-flex', width: '95%', fontFamily: 'PFDinReg', justifyContent: 'flex-end' }}>
                <SearchComponentV2 isLightTheme={isLightTheme} caps={navData.options.topLevelCaps} drawerIsOpen={drawerIsOpen} updateSearchIsOpen={updateSearchIsOpen} />
                </div>
              </div>
              : <div className={classes.searchBarStyles} />
            }
          </div>
          {(navData.options && navData.options.enableLangSupport) ? showLangLinks(langSupport) : ''}
        </List>)
      );
    }
————— Return ——————————————

return (
   <React.Fragment>
     <Toolbar className={`${isLightTheme ? classes.bgLight : classes.bgDark}` + ' ' + classes.mainMenuBarPadding + ' ' + classes.root + classes.root + ' ' + classes.toolBar}>
                              {BuildIcon(isLightTheme ? navData.lightLogo : navData.logo, ((navData.options && navData.options.overrideMobileMenu && navData.options.alternateSVG)) ? (isLightTheme ? navData.options.alternateSVGLight : navData.options.alternateSVG) : null)}
                              {!isLefOrRight ?
                                TopLevelMenu((props && props.isAuth) ? navData.auth : (navData.recog && props.recognised ? navData.recog : navData.unauth))
                                :
                                createLayout((props && props.isAuth) ? navData.auth : (navData.recog && props.recognised ? navData.recog : navData.unauth),
                                  navData.logo, navData.options && navData.options.enableLangSupport ? langSupport : null)}
                            </Toolbar>
    
     </React.Fragment>
    )

On click of Icon the drawer opens

you can use [React.lazy](https://reactjs.org/docs/code-splitting.html#reactlazy) in conjunction with conditional rendering to achieve what you desire. such as `{isButtonClicked ? : '' }` — irous, Sep 09 '22 at 03:15
Thanks @irous Is a fallback required or conditional check is sufficient. — Yeshwanth Kumar, Sep 09 '22 at 03:36
I think conditional rendering is required because without it, your component will be rendered like normal so not optimize anything. I'm not sure about fallback but just provide a simple fallback. — irous, Sep 09 '22 at 03:51
@irous One set back is the search icon and the auto complete suggestion is tightly coupled in the same component. Icon is required on page load but the auto complete is only required on user interaction. Should i segregate it? How do i move forward — Yeshwanth Kumar, Sep 10 '22 at 04:23
not sure. like you, I just learnt about react lazy loading. I can only give you some general tips like above. for specific implementation, I believe you can do it yourself. — irous, Sep 10 '22 at 04:52
You can dynamically import (using [`next/dynamic`](https://nextjs.org/docs/advanced-features/dynamic-import)) the autocomplete component. As long it's rendered conditionally, it will only be loaded when it needs to be rendered. — juliomalves, Sep 13 '22 at 21:54
@juliomalvesHere is the change i am currently doing 1) Split the code which renders the search icon into its own component (SearchComponentV2) and imported in GlobalHeader. 2) Migrated all the code related to auto complete i.e styles, API calls, functions into its own component and lazy loaded into SearchComponentV2. — Yeshwanth Kumar, Sep 14 '22 at 03:52

Reduce page chunk size by loading the component only that is required

0 Answers0