title: Webpack dev middleware react hot reload too slow
body: <p>I have a simple configuration with <code>webpack-dev-middleware</code> and <code>webpack-hot-middleware</code> that uses Hot reload (HMR) with react. </p>
  
  <p>Everything is working fine except that every change i made to the code it takes up 2 3-4 seconds !!! till I see it in the browser. 
  Am I doing something wrong ? it's supposed to be like this ? </p>
  
  <p>My code is rather big and my bundle minified get to 841kb (200kb gzipped) is this the reason ? the more the codebase is bigger the bundle creation in slower? </p>
  
  <p><strong>Express Server:</strong></p>
  
  <pre><code>var webpack = require('webpack');
  var webpackConfig = require('./webpack.hot.config');
  var compiler = webpack(webpackConfig);
  
  app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath,
    watchOptions: {
      poll: true
    }
   }));
  app.use(require("webpack-hot-middleware")(compiler, {
    log: console.log,
    path: '/__webpack_hmr',
    heartbeat: 10 * 1000
   }));
  </code></pre>
  
  <p><strong>webpack.hot.config.js</strong></p>
  
  <pre><code>    const path = require('path');
      const webpack = require('webpack');
  
  module.exports = {
  
  context: __dirname,
  entry: [
      'webpack-hot-middleware/client?path=/__webpack_hmr&amp;timeout=20000',
      './src/js/index'
  ],
  module: {
      loaders: [{
          test: /\.jsx?$/,
          include: path.join(__dirname, 'src/js'),
          //exclude: /node_modules/,
          loader: 'react-hot!babel'
      },
          {
              // Test expects a RegExp! Note the slashes!
              test: /\.css$/,
              loaders: ['style', 'css'],
              // Include accepts either a path or an array of paths.
              include: path.join(__dirname, 'src/css')
          }
      ]
  },
  resolve: {
      extensions: ['', '.js', '.jsx']
  },
  output: {
      path: __dirname + '/public',
      publicPath: '/',
      filename: 'js/app.js'
  },
  plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
  ]
  };
  </code></pre>
  
  <p>And this is what i get in the console when i changed something in the code:</p>
  
  <pre><code>[HMR] App is up to date.
  app.js:73223 [HMR] bundle rebuilding
  app.js:73226 [HMR] bundle rebuilt in 335ms
  app.js:73289 [HMR] Checking for updates on the server...
  app.js:73362 [HMR] Updated modules:
  app.js:73364 [HMR]  - ./src/js/components/header.jsx
  app.js:73369 [HMR] App is up to date.
  </code></pre>