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.

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). — lovelikelando, Apr 28 '16 at 01:42
@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`. — John William Domingo, May 03 '16 at 01:22

score 6 · Answer 1 · edited Apr 01 '19 at 14:15

6

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

edited Apr 01 '19 at 14:15

Anas Abu Farraj

1,540
4
23
31

answered Apr 01 '19 at 14:02

James R

61
1
2

score 5 · Answer 2 · answered May 03 '16 at 01:19

5

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.

answered May 03 '16 at 01:19

John William Domingo

487
4
13

1

that does not seem to help. – Adidi May 15 '16 at 09:12
1

That's not an option when using docker on windows. – wintercounter May 04 '18 at 16:18

score 1 · Answer 3 · answered May 03 '16 at 16:45

1

You should enable caching:

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

answered May 03 '16 at 16:45

hampusohlsson

10,109
5
33
50

1

that does not seem to help. – Adidi May 15 '16 at 09:12
@Adidi did you find a solution? Otherwise you can check out https://webpack.js.org/plugins/dll-plugin/ – hampusohlsson Aug 08 '17 at 16:36

Webpack dev middleware react hot reload too slow

3 Answers3