材料 UI Webpack 构建

Question

我做了一个小应用程序，使用React，FullCalendar，JQuery，Material UI和Formy-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

这将打开缩小捆绑包中空间使用情况的可视化。

另一个好工具是 webpack-bundle-analyzer .