ReactJS: Tách thư viện

loadable.lib cho phép bạn trì hoãn việc tải thư viện. Nó cần một prop kết xuất được gọi khi thư viện được tải.

import loadable from '@loadable/component'

const Moment = loadable.lib(() => import('moment'))

function FromNow({ date }) {
  return (
    <div>
      <Moment fallback={date.toLocaleDateString()}>
        {({ default: moment }) => moment(date).fromNow()}
      </Moment>
    </div>
  )
}

Bạn cũng có thể sử dụng một ref, được điền khi thư viện được tải.

import loadable from '@loadable/component'

const Moment = loadable.lib(() => import('moment'))

class MyComponent {
  moment = React.createRef()

  handleClick = () => {
    if (this.moment.current) {
      return alert(this.moment.current.default.format('HH:mm'))
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>What time is it?</button>
        <Moment ref={this.moment} />
      </div>
    )
  }
}

Bạn cũng có thể truyền một hàm đến ref, được gọi khi thư viện được tải.