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开发中间件反应热重载太慢

回答

相关问题