Material UI Webpack Build

Question

I did a little app using React, FullCalendar, JQuery, Material UI combined with Formsy-material-ui.

The app consists showing the fullcalendar with events.

This events are created doing click in a spot of the calendar and It renders a Form inside a Dialog with components like FormsySelect, FormsyDatepicker or FormsyTextfield.

When I do the build with webpack, generates a bundle with a weight of 588kb.

The Dialog form I load in another component by the way.

If I don't render my Dialog component the size of the bundle is 220kb.

Could Material UI be the responsible for this?.

Edit: I leave the imports that I made in the Dialog Component.

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

The proper way to go about solving this problem is to analyse you bundle first. Try running source-map-explorer against it:

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

This will open up a visualization of how the space is used in your minified bundle.

Another good tool is webpack-bundle-analyzer.