title: Why is material ui build so big
body: <p>I'm trying to get Material-ui to tree-shake correctly. The bundle is extremely large compared to what I'm actually using. I'm not using most of the components listed by the analyzer plugin below and I'm importing everything like it says on the material-ui docs. For example here is what it looks like in one of my files.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Button from '@material-ui/core/Button';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import Grid from '@material-ui/core/Grid';
  import Typography from '@material-ui/core/Typography';
  import { makeStyles } from '@material-ui/core/styles';
  import Container from '@material-ui/core/Container';</code></pre>
  </div>
  </div>
  </p>
  <ul>
  <li>Parsed: 1.7mb</li>
  <li>Stat: 1.1mb</li>
  <li>Gzipped: 253kb</li>
  </ul>
  <p>In contrast, I use react-bootstrap in a very similar way and its size is much smaller.</p>
  <ul>
  <li>Parsed: 55kb</li>
  <li>Stat: 28kb</li>
  <li>Gzipped: 7kb</li>
  </ul>
  <p><a href="https://i.stack.imgur.com/0c4rk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0c4rk.png" alt="enter image description here" /></a></p>
  <p>Here is my webpack file</p>
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const fs = require('fs');
  const WebpackOnBuildPlugin = require('on-build-webpack');
  const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
  
  const buildDir = './build/';
  
  module.exports = {
    optimization: {
      usedExports: true,
    },
    entry: {
      build: './src/index.js',
    },
    plugins: [
      new BundleAnalyzerPlugin(),
      new LodashModuleReplacementPlugin(),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 25,
      }),
      new MiniCssExtractPlugin(),
    ],
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
        {
          test: /\.s[ac]ss$/i,
          use: [
            // Creates `style` nodes from JS strings
            'style-loader',
            // Translates CSS into CommonJS
            'css-loader',
            // Compiles Sass to CSS
            'sass-loader',
          ],
        },
      ],
    },
    output: {
      chunkFilename: '[id].[contenthash].chunk.js',
      filename: 'bundle.js',
      path: path.resolve(__dirname, './build'),
    },
  };
  </code></pre>
  <p>I thought that Material-UI would be pretty small (in the kb range) given that I'm using basic functionality.</p>
  <p>Also, I'm also using code-splitting by route, but Webpack includes MUI in the main bundle because it's shared by a few chunks. That means that I have an extra mb in every route even if that page doesn't use material ui. Is there any way to code-split so only the individual MUI modules get loaded in their appropriate routes?</p>