ReactJS在制作之后制作了大文件。为什么呢？

我正在制作一个react应用程序，在制作react应用程序版本时，我遇到了文件大小过大的问题。让我告诉你更多关于我的react应用程序的信息。这是一个HTML模板生成器应用程序。用户添加不同的部分以创建完整的页面模板。问题是我有很多基于React类的组件文件，几乎是2.5k文件。我通过react可加载库调用这些组件。它在生产和开发模式下运行良好。但主要的问题是，当我为生产构建该流程时，其大小或多或少已经达到65mb。如何优化production app.js文件的大小

我正在附加我的代码的一些快照

我正在使用库拆分代码

import React, { Component } from "react";
import Loadable from "react-loadable";
import AddSection from "./addSection";
import EditorContext from "../context/index";
import { Button, Icon } from "antd";
import SectionMenu from "./section_menu";

class Content extends Component {
  static contextType = EditorContext;
  // this.data = ["page1/section_0", "page1/section_1"] // its all react file in an array

  handleLib = val => {
    const { setLibraryModal, project } = this.context;

    let index = project.data.findIndex(p => p.id === val.id);

    setLibraryModal(true, index);
  };
  render() {
    const data = this.context.project.data;
    const { loading } = this.context;
    return (<div className="cwp_content_area">
        {data && data.map((val, ind) => {
            const LoadableComponent = Loadable({
              loader: () => import(`../../../divi-pages/${val.data}`),
              loading: () => <h1>Loading</h1>
            });
            return loading ? (
              <h1>Loading</h1>
            ) : (
              <div className="cwp_section" key={ind}>
                <SectionMenu value={val} />
                <LoadableComponent />
                <Button
                  onClick={() => this.handleLib(val)}
                  className="add_section_middle"
                  type="primary"
                >
                  <Icon type="plus" />
                </Button>
              </div>
            );
          })}
        <AddSection />
      </div>
    );
  }
}

export default Content;

import React，{Component}来自“React”；
从“react Loadable”导入Loadable；
从“/AddSection”导入AddSection；
从“./上下文/索引”导入编辑器上下文；
从“antd”导入{按钮，图标}；
从“/section_menu”导入SectionMenu”；
类内容扩展组件{
静态contextType=EditorContext；
//this.data=[“page1/section\u 0”，“page1/section\u 1”]//它的所有文件都在一个数组中
handleLib=val=>{
const{setLibraryModal，project}=this.context；
让index=project.data.findIndex（p=>p.id==val.id）；
setLibraryModal（真，索引）；
};
render（）{
const data=this.context.project.data；
const{loading}=this.context；
返回(
{data&&data.map（（val，ind）=>{
常量LoadableComponent=可加载({
加载程序：（）=>import（`../../../divi pages/${val.data}`），
加载：（）=>加载
});
退货(
加载
) : (
this.handleLib（val）}
className=“添加部分中间”
type=“主要”
>
);
})}

为用户端加载65mb真的很痛苦。我想压缩文件大小，然后使用live project。有人能帮我吗，或者给我另一个最好的方法。
好的，让我用代码更新帖子。这可能会有帮助：我已经在网页包中尝试过这个钩子。但它不会对文件进行太多压缩。我不知道它是否省略了在制作时分离区块文件。它将所有区块文件合并为一个或两个JS文件。