Webpack開發中間件反應熱重載太慢

我有一個簡單的配置webpack-dev-middleware和webpack-hot-middleware使用熱重載（HMR）的反應。Webpack開發中間件反應熱重載太慢

一切都工作正常，除了我對代碼所做的每一個變化，它需要2 3-4秒！直到我在瀏覽器中看到它。我做錯了什麼？它應該是這樣的？

我的代碼相當大，我的包縮小到841kb（200kb gzipped）是這個原因嗎？代碼庫越大，創建的包越慢？

Express服務器：

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.

來源

2016-04-24 Adidi

所以'排除：/ node_modules /'被註釋掉。當它在配置中時，構建是否仍然很慢？除此之外，我建議刪除OccurrenceOrderPlugin。這個插件是爲了幫助分塊，它看起來並不像你正在實現的（除非你在不同的配置文件中）。 – garrettmaring

@garrettmaring，使用'include'代替'exclude'應該足夠了，因爲它是更明確的變體。在過去，我認爲我還需要使用'OccurenceOrderPlugin'來確保'webpack-dev-middleware'的熱重載。 –

缺點ider在中間件中將輪詢切換爲false。我發現輪詢可能是CPU密集型的。

在您的webpack配置中，您可能還想嘗試添加devtool: false以避免創建源地圖。

來源

2016-05-03 01:19:19

似乎沒有幫助。 – Adidi

您應該啓用緩存：

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

來源

2016-05-03 16:45:37 hampusohlsson

似乎沒有幫助。 – Adidi

@Adidi是否找到解決方案？否則，您可以查看https://webpack.js.org/plugins/dll-plugin/ – hampusohlsson

Webpack開發中間件反應熱重載太慢

回答

相關問題