5 tricks for separating a bundle and lazy loading components in React

Splitting Javascript into multiple files is called bundle splitting. This allows you to load only the code that is currently used by the application, other parts are loaded as needed (at the request of the user).

«» (lazy loading) :

• (view — , )

  
  
  
  
  
  
  

• ,

  
  
  
  
  
  
  

• ,

  
  
  
  
  
  
  

• , ,

  
  
  
  
  
  
  
  
  
  
  

  1. Webpack

  
  
  

Webpack



() . :

import { useState } from 'react'

function MainComponent() {

 const [isModalDisplayed, setModalDisplayed] = useState(false)

 const [ModalComponent, setModalComponent] = useState(null)

 const loadModalComponent = async () => {

   const loadResult = await import('./components/Modal.js')

   setModalComponent(() => loadResult.default)

 }

 return (

   <div>

     {isModalDisplayed && ModalComponent ? <ModalComponent /> : null}

     <button

       onClick={() => {

         setModalDisplayed(true)

         loadModalComponent()

       }}

     >

       Load Modal Component

     </button>

   </div>

 )

}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. Webpack



. , .

(microfrontend).

2. Split API React-

fusion-react



split



, - :

• 
  
  
  
  
  
  

• «»

  
  
  
  
  
  
  

React-, .

import { Link, Switch, Route } from 'react-router-dom'

import { split } from 'fusion-react'

const Loading = () => <div>Loading...</div>

const Error = () => <div>Error</div>

const Hello = split({

 load: () => import('./components/hello.js'),

 Loading,

 Error,

})

const Root = () => (

 <>

   <div>

     <ul>

       <li>

         <Link to='/'>Home</Link>

       </li>

       <li>

         <Link to='/hello'>Hello</Link>

       </li>

     </ul>
   </div>

   <Switch>

     <Route path='/' exact component={Home} />

     <Route path='/hello' component={Hello} />

   </Switch>

 </>

)

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

— , .

, — .

split



Hello



, . load



.

.

. .: React-, , react-loadable



react-lazyload



.

3. « » (vendor bundle)

, , ? , () , , . .

node_modules



:

const path = require('path')

module.exports = {

 entry: path.resolve(__dirname, 'src/index.js'),

 output: {

   path: path.resolve(__dirname, 'dist'),

   filename: '[name].[contenthash].js',

 },

}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

(yarn build



npm run build



), - :

⬡ webpack: Build Finished

⬡ webpack: assets by status 128 KiB [emitted]

asset 935.js 124 KiB [emitted] [minimized] (id hint: vendors) 2 related assets

asset main.js 3.24 KiB [emitted] [minimized] (name: main) 1 related asset

asset index.html 267 bytes [emitted]

assets by status 7.9 KiB [compared for emit]

asset main.css 7.72 KiB [compared for emit] (name: main) 1 related asset

asset 34.js 187 bytes [compared for emit] [minimized] 1 related asset

Entrypoint main 135 KiB (326 KiB) = 935.js 124 KiB main.css 7.72 KiB main.js 3.34 KiB 3 auxiliary assets

...

webpack 5.5.0 compiled successfully in 4856 ms

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

4.

, .

, ?

, React



, , .

Webpack



optimization



, :

module.exports = {

 splitChunks: {

   chunks: 'async',

   cacheGroups: {

     default: {

       minChunks: 2,

       reuseExistingChunk: true,

     },

     vendor_react: {

       test: /.*\/node_modules\/react\/index\.js/,

       name: 'vendor-react',

       chunks: 'initial',

       enforce: true,

     },

   },

 },

}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

client-vendor.js



clietn-vendor-react.js



.

5. React.lazy()

React.lazy()



— , .

:

import MyComponent from './MyComponent'

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

React.lazy()



:

const OtherComponent = React.lazy(() => import('./OtherComponent')

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, React.lazy()



, Suspense



, (, ) :

import { lazy, Suspense } from 'react'

const OtherComponent = lazy(() => import('./OtherComponent'))

function MyComponent() {

 return (

   <>

     <Suspense fallback={<div>Loading...</div>}>

       <OtherComponent />

     </Suspense>

   </>

 )

}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

fallback



(). Suspense



«» .

Suspense



, :

import { lazy, Suspense } from 'react'

const OtherComponent = lazy(() => import('./OtherComponent'))

const AnotherComponent = lazy(() => import('./AnotherComponent'))

function MyComponent() {

 return (

   <>

     <Suspense fallback={<div>Loading...</div>}>

       <section>

         <OtherComponent />

         <AnotherComponent />

       </section>

     </Suspense>

   </>

 )

}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , . , , , .

, , , .

, JavaScript-, , .

---

.

10% !