वेबपैक डे मिडलवेयर प्रतिक्रिया हॉट रीलोड बहुत धीमी है

Question

मेरे पास webpack-dev-middleware और webpack-hot-middleware के साथ एक सरल कॉन्फ़िगरेशन है जो प्रतिक्रिया के साथ हॉट रीलोड (एचएमआर) का उपयोग करता है।

सब कुछ ठीक काम कर रहा है सिवाय इसके कि कोड में किए गए प्रत्येक बदलाव में 2 3-4 सेकंड लगते हैं !!! जब तक मैं इसे ब्राउज़र में नहीं देखता। क्या मैं कुछ गलत कर रहा हूं? यह ऐसा होना चाहिए?

मेरा कोड बड़ा है और मेरा बंडल minified 841kb (200kb gzipped) प्राप्त करने का कारण है? जितना अधिक कोडबेज धीमा में बंडल निर्माण बड़ा होगा?

एक्सप्रेस सर्वर:

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

और यह मैं कंसोल में क्या मिलता है जब मैं कोड में कुछ बदल गया है:

[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

विपक्ष अपने मिडलवेयर में झूठ बोलने के लिए ider स्विचिंग। मैंने पाया है कि मतदान सीपीयू-गहन हो सकता है।

आप वेबपैक कॉन्फ़िगरेशन में, आप स्रोत मानचित्र बनाने से बचने के लिए devtool: false जोड़ने का प्रयास भी कर सकते हैं।

Answer 2

आप कैशिंग को सक्षम करना चाहिए:

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