react如何实现组件预加载？ about fe-interview

[artdong]

动态import()

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

react-loadable

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

tips

要安装配置babel-plugin-syntax-dynamic-import，否则会报语法错误

npm i react-loadable babel-plugin-syntax-dynamic-import -D

在.babelrc文件中添加配置

{
  "presets": [
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import"
  ]
}