Материал UI Webpack Build

Question

Я сделал небольшое приложение, используя React, FullCalendar, JQuery, Material UI в сочетании с Formsy-material-ui.

Приложение состоит из отображения полного календаря с событиями.

Эти события создаются с помощью щелчка в области календаря, и он отображает форму в диалоге с такими компонентами, как FormsySelect, FormsyDatepicker или FormsyTextfield.

Когда я делаю сборку с помощью веб-пакета, создается пакет весом 588 КБ.

Форма диалога я загружаю в другой компонент кстати.

Если я не отрисовываю свой компонент Dialog, размер пакета составляет 220 КБ.

Может ли Material UI быть ответственным за это?

Изменить: я оставляю импорт, который я сделал в компоненте диалога.

import React, { Component, PropTypes } from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Formsy from 'formsy-react';
import RaisedButton from 'material-ui/RaisedButton';
import MenuItem from 'material-ui/MenuItem';
import { FormsySelect, FormsyText, FormsyTime, FormsyDate, FormsyCheckbox } from 'formsy-material-ui/lib';
import Dialog from 'material-ui/Dialog';
import { mouseTrap } from 'react-mousetrap';

Answer 1

Правильный способ решить эту проблему - сначала проанализировать ваш пакет. Попробуйте запустить source-map-explorer против этого:

$ sudo npm install -g source-map-explorer
$ source-map-explorer bundle.min.js
$ source-map-explorer bundle.min.js bundle.min.js.map

Это откроет визуализацию того, как пространство используется в вашем свернутом пакете.

Еще один хороший инструмент webpack-bundle-analyzer,