Webpack dev middleware react hot reload too slow - express

Question

I have a simple configuration with webpack-dev-middleware and webpack-hot-middleware that uses Hot reload (HMR) with react.
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 ?
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?
Express Server:
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
}));
webpack.hot.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
context: __dirname,
entry: [
'webpack-hot-middleware/client?path=/__webpack_hmr&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()
]
};
And this is what i get in the console when i changed something in the 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.

Answer 1

Pro Tip: Change your mode in webpack.config.js to development. It defaults to production if you leave this property out, which means it does slow production stuff and makes your hot reloading suck.
module.exports = {
mode: 'development'
};

Answer 2

Consider switching polling to false in your middleware. I've found that polling can be CPU-intensive.
In you webpack config, you might also want to try adding devtool: false to avoid creating a source map.

Answer 3

You should enable caching:
...
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
cache: true
};