代码分割 - React.lazy

import()

在你的应用中引入代码分割的最佳方式是通过动态 import() 语法。

 

使用之前:

import { add } from './math';
console.log(add(16, 26));

 

使用之后:

import("./math").then(math => {
  console.log(math.add(16, 26));
});

当 Webpack 解析到该语法时,会自动进行代码分割。如果你使用 Create React App,该功能已开箱即用,你可以立刻使用该特性

 

React.lazy

React.lazy 函数能让你像渲染常规组件一样处理动态引入(的组件)。

 

使用之前:

import OtherComponent from './OtherComponent';

 

使用之后:

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

 

此代码将会在组件首次渲染时,自动导入包含 OtherComponent 组件的包。

React.lazy 接受一个函数,这个函数需要动态调用 import()。它必须返回一个 Promise,该 Promise 需要 resolve 一个 defalut export 的 React 组件。

然后应在 Suspense 组件中渲染 lazy 组件,如此使得我们可以使用在等待加载 lazy 组件时做优雅降级(如 loading 指示器等)。

 

例子:

import React, { Suspense } from 'react';

const OtherComponent1 = React.lazy(() => new Promise(resolve =>
  setTimeout(() => resolve(import('./OtherComponent') ),
    3000
  )
));

const MyComponent = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent1 />
      </Suspense>
    </div>
  );
}

export default MyComponent;
import React from 'react';

const OtherComponent = () => {
  return (
    <div>
      OtherComponent
    </div>
  );
}

export default OtherComponent;

 

看一下实际的效果:注意观察右边的文件加载:

屏幕录制2020-11-15 上午12.21.44.2020-11-15 00_26_03.gif

 

我们可以看到OtherComponent文件是动态加载的。

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页