5 trucos para separar el paquete y los componentes de carga diferida en React

La división de Javascript en varios archivos se denomina división de paquetes. Esto le permite cargar solo el código que utiliza actualmente la aplicación, otras partes se cargan según sea necesario (a petición del usuario).

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