Webpack dev中间件反应热重载太慢

时间:2016-04-24 17:16:29

标签: express reactjs webpack-hmr webpack-hot-middleware hot-module-replacement

我有webpack-dev-middlewarewebpack-hot-middleware的简单配置,它使用Hot reload(HMR)with react。

一切正常,但我对代码所做的每一次更改都需要2到3-4秒!直到我在浏览器中看到它。 难道我做错了什么 ?它应该是这样的?

我的代码相当大,我的捆绑缩小到841kb(200kb gzip)这是原因吗?代码库越大,捆绑创建速度越慢?

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

当我在代码中更改内容时,这就是我在控制台中获得的内容:

[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.

3 个答案:

答案 0 :(得分:4)

考虑在中间件中将轮询切换为false。我发现轮询可能是CPU密集型的。

在您的webpack配置中,您可能还想尝试添加devtool: false以避免创建源地图。

答案 1 :(得分:1)

您应该启用缓存:

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

答案 2 :(得分:0)

专业提示:将 webpack.config.js 中的模式更改为开发。如果不使用此属性,则默认为生产状态,这意味着它会减慢生产速度,并使您的热重装工作陷入困境。

module.exports = {
    mode: 'development'
};