Express 网页包开发中间件反应热重新加载太慢
我使用Express 网页包开发中间件反应热重新加载太慢,express,reactjs,webpack-hmr,webpack-hot-middleware,hot-module-replacement,Express,Reactjs,Webpack Hmr,Webpack Hot Middleware,Hot Module Replacement,我使用webpack-dev-middleware和webpack-hot-middleware进行了一个简单的配置,它使用react的热重新加载(HMR) 一切都很好,除了我对代码所做的每一次更改都需要2-3-4秒!!!直到我在浏览器中看到它。 我做错什么了吗?应该是这样的吗 我的代码相当大,我的包缩小到841kb(200kb gzip),这是原因吗?代码库越多,包的创建越慢 Express服务器: var webpack = require('webpack'); var webpackCo
webpack-dev-middleware
和webpack-hot-middleware
进行了一个简单的配置,它使用react的热重新加载(HMR)
一切都很好,除了我对代码所做的每一次更改都需要2-3-4秒!!!直到我在浏览器中看到它。
我做错什么了吗?应该是这样的吗
我的代码相当大,我的包缩小到841kb(200kb gzip),这是原因吗?代码库越多,包的创建越慢
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.
考虑在中间件中将轮询切换为false。我发现轮询可能是CPU密集型的
在网页包配置中,您可能还希望尝试添加
devtool:false
,以避免创建源映射。您应该启用缓存:
...
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
cache: true
};
Pro提示:将webpack.config.js中的模式更改为开发模式。如果不使用此属性,则默认为生产,这意味着它会减慢生产速度,并使热重新加载变得很糟糕
module.exports = {
mode: 'development'
};
因此,
exclude:/node\u modules/
被注释掉。构建在配置中时是否仍然很慢?除此之外,我建议删除OccurrenceOrderPlugin。该插件旨在帮助进行看起来不像您正在实现的分块(除非您在不同的配置文件中)。@garrettmaring,使用include
代替exclude
应该足够了,因为这是一个更明确的变体。在过去,我认为我还需要使用occurrenceorderplugin
来确保webpack dev中间件的热重新加载。这似乎没有帮助。在windows上使用docker时,这不是一个选项。这似乎没有帮助。@Adidi您找到解决方案了吗?否则你可以退房