1

我使用 React、FullCalendar、JQuery、Material UI 和 Formsy-material-ui 做了一个小应用程序。

该应用程序包括显示带有事件的完整日历。

此事件是在日历的某个位置单击创建的,它在对话框内呈现一个表单,其中包含 FormsySelect、FormsyDatepicker 或 FormsyTextfield 等组件。

当我使用 webpack 进行构建时,会生成一个重量为 588kb 的包。

顺便说一下,我在另一个组件中加载的 Dialog 表单。

如果我不渲染我的 Dialog 组件,则包的大小为 220kb。

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';
4

1 回答 1

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.

于 2017-02-16T15:39:56.387 回答