5 truques para separar um pacote e componentes de carregamento lento no React

A divisão do Javascript em vários arquivos é chamada de divisão do pacote. Isso permite que você carregue apenas o código que está sendo usado atualmente pelo aplicativo, outras partes são carregadas conforme necessário (a pedido do usuário).

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