title: ReactJS - What makes bundle.js size big
body: <p>I have recently completed a project on ReactJS, the only problem with the project is its production bundle.js size its around <strong>30MB</strong>, that's insanely huge. I have used <a href="https://www.npmjs.com/package/webpack-bundle-analyzer" rel="nofollow noreferrer">BundleAnalyzerPlugin</a> plugin to analyse it, it looks like this</p>
  
  <p><a href="https://i.stack.imgur.com/ZS4vb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZS4vb.png" alt="enter image description here"></a></p>
  
  <p>The bigger the block, bigger is the size.</p>
  
  <p><strong>node_modules</strong>=10 MB
  <strong>each visible small chunks are almost</strong> = 1MB</p>
  
  <p>My webpack config looks like this</p>
  
  <p><strong>webpack.base.config.js</strong></p>
  
  <pre><code>var webpack = require('webpack');
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  module.exports = {
    entry: [
      './src/index.js'
    ],
    output: {
      path: __dirname,
      publicPath: '/',
      filename: 'bundle.js'
    },
    noParse:[
      './~/xlsx/jszip.js',
    ],
    externals:[
      {'./jszip': 'jszip'}
    ],
    module: {
      loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      },
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.(html)$/,
        loader: "html-loader",
        options:{
          attrs:[':data-src!./src/components/preview/preview_html',':data-src!./src/components/landing/loader/index.html']
        }
      },
      {
        test: /\.(ttf|gif|eot|svg|woff|woff2|png)(\?.+)?$/,
        loader: 'file-loader?name=[hash:12].[ext]'
      },
      {
        test: /\.css?$/,
        loader: 'style-loader!css-loader?modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]'
      },
      {
        test: /\.scss?$/,
        loader: 'style-loader!css-loader!sass-loader'
      }]
    },
    resolve: {
      root: __dirname,
      alias:{
        //Have set of aliases
      },
      extensions: ['','.json', '.js', '.jsx','.ejs']
    },
    plugins: [
          new webpack.ProvidePlugin({
             $: "jquery",
             jQuery: "jquery"
         }),
         new BundleAnalyzerPlugin()
    ],
    devServer: {
      historyApiFallback: true,
      contentBase: './',
      watchContentBase: true,
    },
    devtool:'cheap-module-eval-source-map'
  };
  </code></pre>
  
  <p><strong>webpack.prod.config.js</strong></p>
  
  <pre><code>const merge = require('webpack-merge');
  const baseConfig = require('./webpack.base.config.js');
  var webpack = require('webpack');
  var CompressionPlugin = require('compression-webpack-plugin');
  
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = merge(baseConfig,{
    plugins: [
        new webpack.DefinePlugin({
          'process.env': {
            'NODE_ENV': JSON.stringify('production')
          }
        }),
         new HtmlWebpackPlugin({
            template:'index.ejs',
            hash: false,
            baseHref: 'xxxx',
            scripts: [
              {
                src: 'bundle.js',
                type: 'text/javascript'
              }
            ]
        })
    ]
  });
  </code></pre>
  
  <p>I have imported few css directly from node_modules into <strong>index.ejs</strong> file which looks like this</p>
  
  <pre><code>&lt;link rel="stylesheet" href="/node_modules/react-bootstrap-switch/dist/css/bootstrap3/react-bootstrap-switch.css"&gt;
      &lt;link rel="stylesheet" href="/node_modules/draft-js/dist/Draft.css"&gt;
      &lt;link rel="stylesheet" href="/node_modules/react-select-plus/dist/react-select-plus.css"&gt;
      &lt;link rel="stylesheet" href="/node_modules/react-day-picker/lib/style.css"&gt;
      &lt;link rel="stylesheet" href="/node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css"&gt;
      &lt;script src="node_modules/xlsx/dist/shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/xlsx/dist/xlsx.full.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Need help to reduce the size, and find mistakes in config or implementation..</p>
  
  <p>Thanks.</p>