如何修复在使用express的webpack dev server中出现的浏览器重新加载延迟问题

Question

我正在尝试使用express generator和react来设置webpack dev server，使用webpackDevMiddleware和webpackHotMiddleware。虽然我已经让所有东西都正常运作了，但是重新加载的延迟非常大。

每次在浏览器中都会看到这个消息。

 'GET http://localhost:8080/__webpack_hmr 
 net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)'

但是5到10秒后浏览器将重新加载。在终端中，这些消息正在显示。

GET /7310e23232f92e879547.hot-update.json 404 6.282 ms - 1573
GET / 304 1.071 ms - -
GET /__webpack_hmr 200 1.767 ms - -
GET /stylesheets/style.css 304 1.306 ms - -
GET /app-bundle.js 200 5.337 ms - 2960039

我认为Express服务器在获取hot-update.json时出现了延迟或停止。

我已经尝试在bin/www文件中设置超时和keepAliveTimeout。

server.listen(port, () => {
  server.timeout = 0
  server.keepAliveTimeout = 0
 });

package.json

{
  "name": "react-webpack-hmr",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "dev": "nodemon ./bin/www --inspect --watch app.js --watch webpack.config.js --watch src",
    "build": "webpack --config=webpack.config.js",
    "clean": "rimraf public/dist"
  },
  "dependencies": {
    "babel-loader": "^8.0.4",
    "cookie-parser": "~1.4.3",
    "css-loader": "^2.1.0",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "ejs-loader": "^0.3.1",
    "express": "~4.16.0",
    "extract-loader": "^3.1.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "http-errors": "~1.6.2",
    "morgan": "~1.9.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-hot-loader": "^4.6.3",
    "style-loader": "^0.23.1"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.2.0",
    "@babel/generator": "^7.2.2",
    "@babel/polyfill": "^7.2.5",
    "babel-plugin-async-to-promises": "^1.0.5",
    "@babel/core": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-dev-server": "^3.1.14",
    "webpack-hot-middleware": "^2.24.3"
  }
}

webpack.config.js

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const webpack = require('webpack');

    module.exports = {
        entry: {
            app: [  
                'webpack-hot-middleware/client?reload=true',
                // 'webpack/hot/only-dev-server',
                // 'react-hot-loader/patch',
                "@babel/runtime/regenerator",
                "./src/app.js"
            ]
        },
        mode: 'development',
        output: {
            filename: "[name]-bundle.js",
            path: path.join(__dirname, 'public/dist'),
            publicPath: "/"
        },
        devtool: "cheap-eval-source-map",
        devServer: {
            contentBase: "dist",
            overlay: true,
            hot: true
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: [
                    {
                        loader: 'babel-loader'
                    }
                    ]
                },
                {
                    test: /\.html$/,
                    use: [
                    {
                        loader: "html-loader"
                    }
                    ]
                },
            ]
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(),
            new HtmlWebpackPlugin({
                template: './views/index.ejs'
            })
        ]
    }

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

const webpack = require("webpack");
const config = require("./webpack.config");
const compiler = webpack(config);

const webpackDevMiddleware = require('webpack-dev-middleware')(compiler, config.devServer);
const webpackHotMiddleware = require('webpack-hot-middleware')(compiler, config.devServer);

var app = express();

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());


app.use(webpackDevMiddleware);
app.use(webpackHotMiddleware);
//app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

React端的app.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
import { AppContainer } from 'react-hot-loader';

function render(Component) {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>, 
    document.getElementById('app')
  )
}

render(App);

if (module.hot) {
  module.hot.accept('./components/App', () => {
    const newApp = require('./components/App').default 
    render(newApp);
  })
}

我希望每当我保存文件时，浏览器能够在不延迟的情况下重新加载已编译的新代码。请保留HTML标记。

- spaceDog

Answer 1

我发现问题出在我的package.json文件上

我在查看react文件，但这不是应该查看的文件

我删除了旧代码，这是新的代码

"dev": "nodemon --inspect --watch webpack.config.js --watch app.js",

- spaceDog

Answer 2

TLDR; 为了让Nodemon与热模块重载一起工作，您需要从观察列表中排除客户端代码。

Webpack使用__webpack_hmr来接收有关代码更改的事件。如果您编辑文件然后保存它，Nodemon将重新启动，在此期间Webpack HMR失去与事件流的连接，导致无法获取更新的代码。这就是为什么您需要从Nodemon的观察列表中排除客户端代码的原因。基本上，客户端代码刷新由Webpack dev服务器“管理”。

通常我在根目录下有一个nodemon.json文件，让Nodemon知道要观察什么：

{
  "watch": [
    "server.js",
    "src/server",
    "config"
  ]
}

- Tiberiu Maxim