Material UI Webpack Build

Question

React、FullCalendar、JQuery、Material UIをFormsy-material-uiと組み合わせて使用​​した小さなアプリでした。

このアプリは、フルカレンダーにイベントを表示しています。

このイベントは、カレンダーのある場所をクリックすると作成され、FormsySelect、FormsyDatepicker、FormsyTextfieldなどのコンポーネントを使用してフォーム内のフォームをレンダリングします。

webpackでビルドを行うと、588kbのバンドルが生成されます。

途中で別のコンポーネントに読み込まれるダイアログフォーム。

私のダイアログコンポーネントをレンダリングしないと、バンドルのサイズは220kbです。

マテリアル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 

このスペースは、あなた縮小さバンドルで使用されているかの可視化を開きます。

もう1ついいツールはwebpack-bundle-analyzerです。