Reactjs Facebook社交评论插件在react单页应用程序中加载太慢

我有一个react类组件，我需要在其中加载facebook社交评论插件，以便用户可以留下他们的评论。我编写了如下代码：

这是componentDidMount函数：

componentDidMount() {
    window.fbAsyncInit = () => {
      window.FB.init({
        appId: getConfigarationByKey('fb_app_id'),
        xfbml: true,
        version: 'v8.0'
      })
      window.FB.Event.subscribe('xfbml.render', this.stopSpinner)
    }
    var sdkSrc = ''
    if (localStorage.getItem('lang') === 'en')
      sdkSrc = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0'
    else sdkSrc = '//connect.facebook.net/bn_IN/sdk.js#xfbml=1&version=v8.0'
    ;(function (d, s, id) {
      const fjs = d.getElementsByTagName(s)[0]
      if (d.getElementById(id)) {
        return
      }
      const js = d.createElement(s)
      js.id = id
      js.src = sdkSrc
      fjs.parentNode.insertBefore(js, fjs)
    })(document, 'script', 'facebook-jssdk')
    if (window.FB && window.FB.XFBML) {
      window.FB.XFBML.parse()
    }
  }

 componentWillUnmount() {
    if (window.FB) delete window.FB
    document.getElementById('fb-root').outerHTML = ''
    document.getElementById('facebook-jssdk').outerHTML = ''
  }

当我改变路线时，我会像这样清理注释插件代码：

componentDidMount() {
    window.fbAsyncInit = () => {
      window.FB.init({
        appId: getConfigarationByKey('fb_app_id'),
        xfbml: true,
        version: 'v8.0'
      })
      window.FB.Event.subscribe('xfbml.render', this.stopSpinner)
    }
    var sdkSrc = ''
    if (localStorage.getItem('lang') === 'en')
      sdkSrc = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0'
    else sdkSrc = '//connect.facebook.net/bn_IN/sdk.js#xfbml=1&version=v8.0'
    ;(function (d, s, id) {
      const fjs = d.getElementsByTagName(s)[0]
      if (d.getElementById(id)) {
        return
      }
      const js = d.createElement(s)
      js.id = id
      js.src = sdkSrc
      fjs.parentNode.insertBefore(js, fjs)
    })(document, 'script', 'facebook-jssdk')
    if (window.FB && window.FB.XFBML) {
      window.FB.XFBML.parse()
    }
  }

 componentWillUnmount() {
    if (window.FB) delete window.FB
    document.getElementById('fb-root').outerHTML = ''
    document.getElementById('facebook-jssdk').outerHTML = ''
  }

最后，我按照官方文档中的建议编写了html

render() {
    return (
      <Card>
        <CardContent>
          <div
            className="fb-comments"
            data-colorscheme="dark"
            data-href={window.location.href}
            data-numposts="5"
            data-width="100%"
          ></div>
        </CardContent>
      </Card>
    )
  }

render（）{
返回(
)
}

仅此而已。评论插件加载并工作正常，但在页面上加载几乎需要30秒，这是一种非常糟糕的用户体验。有人能帮我解释一下为什么要花这么多时间来加载吗？以及我如何改进它。多谢各位