Промежуточное ПО Webpack dev реагирует на горячую перезагрузку слишком медленно

У меня есть простая конфигурация с webpack-dev-middleware и webpack-hot-middleware, которая использует горячую перезагрузку (HMR) с реакцией.

Все работает нормально, за исключением того, что каждое изменение, которое я внес в код, занимает 2 3-4 секунды !!! пока не увижу в браузере. Я делаю что-то неправильно ? это должно быть так?

Мой код довольно большой, и размер моего пакета уменьшен до 841 КБ (200 КБ в сжатом виде), в этом причина? Чем больше кодовая база, тем медленнее создание пакета?

Экспресс-сервер:

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.

person Adidi    schedule 24.04.2016    source источник
comment
Таким образом, exclude: /node_modules/ закомментирован. Сборка все еще медленная, когда она находится в конфигурации? В дополнение к этому я бы рекомендовал удалить плагин OccurrenceOrderPlugin. Этот плагин предназначен для помощи в разбиении на фрагменты, которые, похоже, вы не реализуете (если только вы не находитесь в другом конфигурационном файле).   -  person garrettmaring    schedule 28.04.2016
comment
@garrettmaring, использования include вместо exclude должно быть достаточно, поскольку это более явный вариант. В прошлом, я думаю, мне также нужно было использовать OccurenceOrderPlugin, чтобы обеспечить горячую перезагрузку для webpack-dev-middleware.   -  person John William Domingo    schedule 03.05.2016


Ответы (3)


Рассмотрите возможность переключения опроса на false в промежуточном программном обеспечении. Я обнаружил, что опрос может сильно нагружать ЦП.

В конфигурации вашего веб-пакета вы также можете попробовать добавить devtool: false, чтобы избежать создания исходной карты.

person John William Domingo    schedule 03.05.2016
comment
это не похоже на помощь. - person Adidi; 15.05.2016
comment
Это не вариант при использовании докера в Windows. - person wintercounter; 04.05.2018

Совет для профессионалов. Измените режим в webpack.config.js на разработку. Если вы не укажете это свойство, по умолчанию используется производственный режим, что означает, что он замедляет производственный процесс и делает вашу горячую перезагрузку отстойной.

module.exports = {
    mode: 'development'
};
person James R    schedule 01.04.2019

Вы должны включить кэширование:

    ...
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    cache: true
};
person hampusohlsson    schedule 03.05.2016
comment
это не похоже на помощь. - person Adidi; 15.05.2016
comment
@Адиди, ты нашел решение? В противном случае вы можете проверить webpack.js.org/plugins/dll-plugin. - person hampusohlsson; 08.08.2017