ReactJS сделал большой размер файла после производства. Это почему? - PullRequest
Новая
       108

ReactJS сделал большой размер файла после производства. Это почему?

0 голосов
/ 29 января 2020

Я создаю приложение реагирования, и у меня возникла проблема с большими размерами файлов в версии React приложения для промышленной сборки. Позвольте мне рассказать вам немного больше о моем приложении реакции. Это HTML приложение для создания шаблонов. Пользователи добавляют разные разделы для создания полного шаблона страницы. Проблема в том, что у меня много файлов компонентов, основанных на React Class, их почти 2,5 тыс. Файлов. И я называю эти компоненты реактивно-загружаемой библиотекой. Работает нормально с режимом производства и разработки. Но главная проблема в том, что когда я создавал этот процесс для производства, размер был больше или меньше до 65 МБ. Как я могу оптимизировать размер рабочего приложения. 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;

Следующий размер списка файлов, созданный после продукций enter image description here

Очень больно загружать 65 МБ для конечного пользователя. Я хочу сжать размер файла, тогда я могу go с живым проектом. Может кто-нибудь помочь с этим или дать мне другой и лучший подход.

...