React.lazy 和 @loadable/components 之间有什么区别？

在讨论React.lazy和@loadable/components之间的区别之前，让我们先谈谈它们是什么以及我们为什么需要它们。 React.lazy 和 @loadable/components 都主要用于Code-Splitting的过程。

代码拆分： Code-Splitting 是一种由 Webpack、Rollup 和 Browserify 等打包工具支持的优化技术（通过 factor-bundle），它允许我们将代码拆分成多个包或块，这些包或块可以在运行时按需或并行动态加载。

这是减少应用程序包大小的有效方法，因为我们只是“延迟加载”用户当前需要的东西。

尽管我们没有以这种方式减少应用程序中的代码总量，但我们避免了加载用户可能永远不需要的代码。这反过来又减少了初始加载期间所需的代码量，并显着改善了应用程序的整体加载时间。

React 实现 Code-Splitting： React 从 16.6.0 版本开始支持使用React.lazy开箱即用的代码拆分。

从那时起，在 React 应用程序中拆分我们的组件一直是一种常见的做法。然而仅仅拆分是不够的，它必须能够等待组件被加载（同时在加载过程中显示一个后备 UI）并处理任何潜在的错误。

这就是为什么我们需要使用Suspense和Error Boundaries的原因。

Javascript

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';
  
const SomeComponent = React.lazy(() => import('./SomeComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
  
const MyComponent = () => (
    

        
            Loading...
}>
                

                    
                    
                
            
        
    

);

---

Javascript

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
    return (
        

            
        
    )
}

Javascript

const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
    return (
        

            Loading...
} />
        

    ) }

---

Javascript

import loadable from '@loadable/component'
const Moment = loadable.lib(() => import('moment'))
function FromNow({ date }) {
    return (
        

            
                {({ default: moment }) => 
                    moment(date).fromNow()}
            
        
    )
}

Javascript

import loadable from '@loadable/component'
const AsyncPage = loadable(props => 
    import(`./${props.page}`))
function MyComponent() {
  return (
    

      
      
    
  )
}