查阅react的官网文档,发现两种方式:
React.lazy和 @loadable/components。
依赖包
{
"@loadable/component": "^5.7.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-router": "^4.3.1",
"react-scripts": "2.1.8",
}
React.lazy
假设Foo.js和Bar.js在同一目录下。
Foo.js
export default class Foo extends React.PureComponent{
render(){
return <div>This is Foo</div>;
}
}
Bar.js
const LazyFoo = React.lazy(() => import('./Foo'))
export default class Bar extends React.PureComponent{
render(){
return (
/**
** fallback表示LazyFoo未加载完时显示的组件,这里直接使用字符串,使用React.lazy时必须和React.Suspense组合使用
**/
<React.Suspense fallback={'loading'}>
<LazyFoo />
</React.Suspense>
);
}
}
其中 () => import(’./Foo’) 返回的是一个promise。因此,不难看出在文件Foo.js中,必须要有一个export default。另外,React.lazy在react-16.8.4的版本不能用于服务端渲染,在服务端进行动态加载,可以使用@loadable/components。
@loadable/components
import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
)
}
React.lazy和@loadable/components的不同之处有哪些呢?@loadable/components官网有一张表:
从这张表上,我们可以看到@loadable/components不仅支持客户端,而且可以支持服务端渲染。@loadable/components可以支持代码分割,而React.lazy只支持组件动态导入。
假设Foo.js和DynamicExport.js位于同一目录下。
虽然说React.lazy不能直接使用
React.lazy((props) => import(`./${props.path}`))
的形式。另外需要注意一点的是,经过代码实验发现两者的path都必须以改文件目录为起点,“./”不能写在变量里面。
const lazyComponent = path => React.lazy(()=> import(`./${path}`));
const LazyFoo = lazyComponent('Foo');
const LoadableComponent = loadable((props) => import(`./${props.path}`));
export default class extends React.PureComponent{
render(){
return (
<>
<React.Suspense fallback="loading">
<LazyFoo />
</React.Suspense>
<LoadableComponent path="Foo" />
</>
);
}
}