Open artdong opened 4 years ago
import React {Suspense,lazy} from 'react'
const LoadableComponent = lazy(() => import("./my-component"));
class Test extends React.Component {
render () {
return (
<Suspense fallback={<div>Loading...</div>}>
<LoadableComponent />
</Suspense>)
}
}
export default Test
import React from 'react'
import loadable from 'react-loadable'
const LoadableComponent = Loadable({
loader: () => import('./my-component'),
loading: <div>Loading...</div>,
});
class Test extends React.Component {
render () {
return (
<div>
<LoadableComponent/>
</div>)
}
}
export default Test
要安装配置babel-plugin-syntax-dynamic-import,否则会报语法错误
npm i react-loadable babel-plugin-syntax-dynamic-import -D
在.babelrc文件中添加配置
{
"presets": [
"react"
],
"plugins": [
"syntax-dynamic-import"
]
}
react如何实现组件预加载?