react-asyncmodule
webpack2+, it's recommended to use import
method implementation code spliting, this component can help you simplify your code.
Installation
npm install react-asyncmodule --save
Basic usage
; const Home = ; const List = ;
通过上面的代码,我们可以发现 loading
and error
2个选项是相同的,可以这样简化。
const AsyncComponent = ; const Home = ; const List = ;
很好,但是还有一些重复的代码。
const Home = ;const List = ;
完美,使用这个 babel 插件 babel-plugin-asyncmodule-import。
返回的 AsnycComponent 组件上有以下一些静态属性和方法。
chunkName
属性,返回当前组件的 chunk 名称,即上面代码中的 chunk
方法的返回值。
preload
预加载方法,返回一个 promise 实例,可在回调中获取到当前组件。a
preloadWeak
预加载方法,不同于 preload
,该方法是同步返回当前的组件,通常用于 server render。
asyncReady
; ;
API
;
Options
load
函数, 返回一个 Promise
实例. 通常由 webpack 提供的 import
方法生成.
render
自定义渲染函数,接收两个参数分别是 props
和 Component
。
const List = ;
resolveWeak
返回当前导入组件的 moduleId。由 webpack 的 require.resolveWeak
方法自动生成。
loading
加载时显示的组件。
error
加载错误时显示的组件。 接受两个参数onRetry
和error
。
delay
默认 200
ms。 loading
组件延迟显示的时间,单位ms。
当网络速度很快时,用户看不到加载组件。
timeout
默认 120000
ms。 加载超时,单位ms。
onModuleLoaded
module加载完执行,返回3个参数
- comp, 当前module
- chunkName, 当前module的chunk名称
- isServer, 当前是否为 node 端
onModuleLoaded(comp, chunkName, isServer)