Webpack dev middleware react hot reload too slow

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.

Subjugate

So the exclude: /node_modules/ is commented out. Is the build still slow when it's in the config? In addition to that, I would recommend removing the OccurrenceOrderPlugin. That plugin is meant to help with chunking which it doesn't seem like you are implementing (unless you are in a different config file). – Chorus

@garrettmaring, using include in place of exclude should suffice as it is the more explicit variant. In the past, I think I've also needed to use the OccurenceOrderPlugin to ensure hot reload for webpack-dev-middleware. – Azotic

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

Heptarchy

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.

Azotic

that does not seem to help. – Subjugate

That's not an option when using docker on windows. – Jeddy

Answer 3

You should enable caching:

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

Acetanilide

that does not seem to help. – Subjugate

@Subjugate did you find a solution? Otherwise you can check out webpack.js.org/plugins/dll-plugin – Acetanilide