reactjs/material-ui 应用程序在生产构建中高达 917kb！我该怎么做才能减小尺寸？

Question

我正在使用 react: 15.4.0, material-ui: 0.16.4, react-tap-event-plugin: 2.0.1，我的应用程序内置了大量的工作流程。当我为生产做准备时，我看到该应用程序在生产构建中消耗了 917kb 并且应用程序在 ui 转换方面也很缓慢。我不确定这两件事是否相关。

我几乎遵循了来自不同博客文章的所有建议来减小捆绑包的大小，但没有任何帮助。

然后我读了一篇文章，说 material-ui 很重，会在应用程序中占用大量空间，所以我也想检查一下这种可能性。

我在 package.json 中的依赖项如下所示，我同时使用 create-react-app 和独立的 webpack 设置。

"dependencies": {
  "babel-loader": "6.2.9",
  "babel-plugin-transform-class-properties": "6.19.0",
  "babel-polyfill": "6.16.0",
  "babel-preset-es2015": "6.18.0",
  "babel-preset-react": "6.16.0",
  "babel-preset-stage-0": "6.16.0",
  "babel-register": "6.18.0",
  "babel-runtime": "6.20.0",
  "body-parser": "1.15.2",
  "concurrently": "3.1.0",
  "express": "4.14.0",
  "formsy-material-ui": "0.5.3",
  "formsy-react": "0.18.1",
  "https": "1.0.0",
  "isomorphic-fetch": "2.2.1",
  "localforage": "1.4.3",
  "material-ui": "0.16.6",
  "nedb": "1.8.0",
  "pako": "1.0.4",
  "peer": "0.2.8",
  "peerjs": "0.3.14",
  "pushstate-server": "2.1.0",
  "qrcode.react": "0.6.1",
  "react": "^15.4.1",
  "react-addons-css-transition-group": "15.4.1",
  "react-dom": "^15.4.1",
  "react-grid-layout": "0.13.9",
  "react-motion": "0.4.7",
  "react-notification-system": "0.2.11",
  "react-redux": "4.4.6",
  "react-router": "3.0.0",
  "react-swipeable-views": "0.9.1",
  "react-tap-event-plugin": "2.0.1",
  "redux": "3.6.0",
  "redux-promise-middleware": "4.2.0",
  "redux-thunk": "2.1.0",
  "redux-undo": "0.6.1",
  "secrets.js-grempe": "1.1.0",
  "uuid": "3.0.1"
}

我的 webpack.config.js 看起来像：

var webpack = require("webpack");

module.exports = {
  entry: {
    'js/bundle': './src/index.js',
  },
  devtool: 'cheap-module-source-map',
  output: {
    path: './public',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: 'style-loader!css-loader'
      }
    ]
  },
  "plugins": [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false
      },
      compress: {
        warnings: false,
        screw_ie8: true
      }
    }),
  ],
  resolve: {
    extensions: [ '', '.js', '.jsx' ]
  }
}

Answer 1

确保您没有在所有 material-ui 上使用命名导入...例如，对于 RaisedButton，请使用以下命令：

import RaisedButton from 'material-ui/RaisedButton';

不是这个：

import { RaisedButton } from 'material-ui';

即使您只使用RaisedButton（575K 与 192K，在基本应用程序中使用上述配置），后者也会导入几乎所有的 material-ui

对于 svg 图标尤其如此。永远不要这样做：

// Import ALL of the svg-icons, but only use ToggleStar (doh!)
import { ToggleStar } from 'material-ui/svg-icons'; // <- 781K bundle.js

对于Card/CardHeader 等的命名导入，List/ListItem，差异不那么剧烈，但如果你不使用所有的，你仍然可以在这里和那里剃掉 1K-5K “子”组件：

// Commented-out named import below produces slightly bigger code
// import { Card, CardMedia, CardTitle, CardText } from 'material-ui/Card';
import Card from 'material-ui/Card/Card';
import CardMedia from 'material-ui/Card/CardMedia';
import CardTitle from 'material-ui/Card/CardTitle';
import CardText from 'material-ui/Card/CardText';

// Commented-out named import below produces slightly bigger code
// import { List, ListItem } from 'material-ui/List';
import List from 'material-ui/List/List';
import ListItem from 'material-ui/List/ListItem';