5 Tricks zum Trennen eines Bündels und zum verzögerten Laden von Komponenten in React

Das Aufteilen von Javascript in mehrere Dateien wird als Bundle-Aufteilung bezeichnet. Auf diese Weise können Sie nur den Code laden, der derzeit von der Anwendung verwendet wird. Andere Teile werden nach Bedarf geladen (auf Anfrage des Benutzers).

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