1

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';
Gabriel García Seco
  • 77
  • 11
  • how are you importing it? – André Junges May 19 '16 at 20:23
  • I'm in a similar situation. Our app uses some of the material-ui components and after building using webpack+UglifyPlugin the size is about 700kb. If I update the webpack config and generates a vendor.min.js file containing only the material-ui package the vendor.min.js is about 650kb. I think it is too much. – acanimal Sep 08 '16 at 15:52

1 Answers1

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.

Dmytro Bevzenko
  • 11
  • 4
  • Although your answer is 100% correct, it might also become 100% useless if that link is moved, changed, merged into another one or the main site just disappears... **:-(** Therefore, please [edit] your answer, and copy the relevant steps from the link into your answer, thereby guaranteeing your answer for 100% of the lifetime of this site! **;-)** You can always leave the link in at the bottom of your answer as a source for your material... – Donald Duck Feb 16 '17 at 15:58