FroalaエディタとReact動的インポート

Question

私は、作成反応型アプリケーションベースのWebページでFroalaエディタを使用しています。バンドルを作成すると、froala_editor.pkgd.min.jsがかなりの量のバンドルサイズを占めていることがわかります。 この問題に対処するために、ここではhttps://serverless-stack.com/chapters/code-splitting-in-create-react-app.htmlに記載されている動的インポートを使用することにしました。 は、だから私はHOC

import React, { Component } from 'react'; 

import Callback from '../Callback'; 

function asyncComponent(importComponent) { 
    class AsyncComponent extends Component { 
     constructor(props) { 
      super(props); 

      this.state = { 
       component: null 
      }; 
     } 

     async componentWillMount() { 
      const { default: component } = await importComponent(); 

      this.setState({ 
       component: component 
      }); 
     } 

     render() { 
      const C = this.state.component; 

      return C ? <C {...this.props} /> : <Callback />; 
     } 
    } 

    return AsyncComponent; 
} 

export default asyncComponent; 

を作成し、私は2つのチャンクを取得して、1エディタが含まれており、他にはない、一部が解決されたbunldeエディタ

const Editor = asyncComponent(() => import('../FroalaEditorComponent')); 

私が言うと、含まれていました。また、負荷時間が改善されています。

しかし、私はそのような設定で別の問題に直面しています。 エディタのページが読み込まれると、アイコンがほとんど表示されません。

他のボタンは、私がChromeでコンソールウィンドウを開いたときに、わからない、なぜそのような行動で、表示されます。

Answer 1

すべてのエディタプラグインがロードされる前にエディタが初期化されているようです。すべてのエディタプラグインは、ツールバーにボタンを入れるために初期化する前にロードする必要があります。