5 astuces pour séparer un bundle et des composants de chargement différé dans React

Le fractionnement de Javascript en plusieurs fichiers s'appelle le fractionnement de bundle. Cela vous permet de ne charger que le code actuellement utilisé par l'application, les autres parties sont chargées selon les besoins (à la demande de l'utilisateur).

«» (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% !