Froala编辑器和React动态导入

Question

我在基于create-react-app的网页中使用 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;

包括编辑

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

我想说，bunlde部分已经解决了，因为我得到了两个块，一个包含编辑器而另一个包含编辑器。它改善了加载时间。

但我面临着这样的设置的另一个问题。 加载编辑器的页面时，它只显示很少的图标。

当我在Chrome中打开控制台窗口时，出现其他按钮，不确定为什么会出现这种行为。

Answer 1

在加载所有编辑器插件之前，看起来编辑器正在初始化。应该在初始化之前加载所有编辑器插件，以便在工具栏中显示按钮。