Question

我正在使用react：15.4.0，material-ui：0.16.4，react-tap-event-plugin：2.0.1并且我的应用程序内置了一些大量的工作流程。当我准备好制作时，我发现该应用程序在生产版本中消耗了917kb，并且在ui过渡方面应用程序也很笨拙。我不确定这两件事是否相关。

我已经关注了来自不同博客帖子的几乎所有建议，以减少捆绑的大小，但没有任何帮助。

然后我读了一些文章，材料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

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

import RaisedButton from 'material-ui/RaisedButton';

而不是这个：

import { RaisedButton } from 'material-ui';

后者会导入几乎所有的材料-ui，即使你只使用RaisedButton（575K vs. 192K，在一个简单的应用程序中使用你的上述配置）

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

// 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如果您没有使用所有＆＃34; sub＆＃34;组件：

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

reactjs / material-ui app在生产版本中飙升917kb！我该怎么做才能减小尺寸？

1 个答案: