Il middleware dev di Webpack reagisce a caldo ricarica troppo lento

Question

Ho una semplice configurazione con webpack-dev-middleware e webpack-hot-middleware che utilizza Hot reload (HMR) con reazione.

Tutto funziona bene, tranne che ogni modifica apportata al codice richiede 2 3-4 secondi !!! fino a quando non lo vedo nel browser. Sto facendo qualcosa di sbagliato? dovrebbe essere così?

Il mio codice è piuttosto grande e il mio bundle ridotto arriva a 841kb (200kb gzip) è questa la ragione? più il codebase è più grande della creazione del bundle più lentamente?

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() 
] 
}; 

e questo è ciò che ottengo nella console quando ho cambiato qualcosa nel codice:

[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

Svantaggi ider che passa il polling a false nel middleware. Ho scoperto che il polling può richiedere un uso intensivo della CPU.

Nella configurazione del pacchetto Web, è possibile anche provare ad aggiungere devtool: false per evitare di creare una mappa di origine.

Answer 2

Si dovrebbe abilitare la cache:

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