reactjs/material-ui app is whooping 917kb in production build! What do I do to decrease size?

Question

I am using react: 15.4.0, material-ui: 0.16.4, react-tap-event-plugin: 2.0.1 and my app has some good amount of workflows built into it. While I was getting ready for production, I see that the app is consuming 917kb in production build and app is slugish as well in terms of ui transitions. I am not sure if both these things are related or not.

I have followed almost all suggestions from different blog posts to reduce the size of the bundle but nothing helps.

Then I read some article that material-ui is heavy and can consumed a lot of space in the app so wanted to check on this possibility as well.

My dependencies in package.json looks like below and I use both create-react-app and an independent webpack setup simultaneously.

"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"
}

My webpack.config.js looks like:

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

Make sure you are not using named imports on all of material-ui... For example, for a RaisedButton, use this:

import RaisedButton from 'material-ui/RaisedButton';

and not this:

import { RaisedButton } from 'material-ui';

The latter would import virtually all of material-ui, even if you only used that RaisedButton (575K vs. 192K, using your above config in a bare-bones app)

This is especially true for svg-icons. Never do this:

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

For the named imports of Card/CardHeader, etc, List/ListItem, the difference is less drastic but you can still shave off 1K-5K here and there if you aren't using all of the "sub" components:

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