反应代码拆分

React应用程序使用Webpack或Browserfy之类的工具捆绑了文件。捆绑是一个过程，需要多个文件并将它们合并为一个文件，称为bundle 。该捆绑包负责一次在网页上加载整个应用程序。我们可以从以下示例中了解它。

App.js

import { add } from './math.js';

console.log(add(16, 26)); // 42

math.js

export function add(a, b) {
  return a + b;
}

捆绑文件如下：

function add(a, b) {
  return a + b;
}

console.log(add(16, 26)); // 42

随着我们应用程序的增长，我们的捆绑软件也将增长，尤其是当我们使用大型第三方库时。如果捆绑包尺寸变大，则需要很长时间才能加载到网页上。为了避免大的捆绑，开始“拆分”是个好方法。你的捆绑包。

2018年10月发布的React 16.6.0 ，引入了一种执行代码拆分的方法。代码拆分是Webpack和Browserify支持的功能，可以创建多个捆绑包，这些捆绑包可以在运行时动态加载。

代码拆分使用React.lazy和Suspense工具/库，它可以帮助您延迟加载依赖项，并且仅在用户需要时才加载依赖项。

代码拆分改善了：

• 应用程序的性能
• 对记忆的影响
• 下载的千字节(或兆字节)大小

反应懒

将代码拆分到应用程序中的最佳方法是通过动态import()语法。 React.lazy函数允许我们将动态导入呈现为常规组件。

之前

import ExampleComponent from './ExampleComponent';

function MyComponent() {
  return (
    

      
    
  );
}

后

const ExampleComponent = React.lazy(() => import('./ExampleComponent'));

function MyComponent() {
  return (
    

      
    
  );
}

上面的代码片段在呈现ExampleComponent时自动加载包含ExampleComponent的捆绑软件。

悬念

如果函数组件(MyComponent)尚未加载包含ExampleComponent的模块，则我们在等待其加载时需要显示一些备用内容。我们可以使用悬念组件来做到这一点。换句话说，暂挂组件负责在获取和呈现惰性组件时处理输出。

const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));

function MyComponent() {
  return (
    

      Loading...
}>