Next.js: Отключить HMR

HMR всегда поддерживается в режиме разработки. Официального способа выключить его нет.
В ближайшее время мы не планируем этого делать.

Разве это не вызовет нагрузку на сервер, нам нужен способ отключить HMR для работы в продакшене.

Он выключен в производстве. Убедитесь, что в рабочей среде запущены next build и next start или next build и NODE_ENV=production node server.js .

Отключение HMR может быть полезно при работе с макетом. Я редактирую styled-components и некоторые глобальные стили css, но предварительный просмотр довольно скоро сломается. Причина в том, что страница получает смесь стилей, созданных с помощью SSR, и только что сгенерированных. Кажется, нет никакого способа преодолеть это, кроме как выключить HMR.

В дополнение к тому, что HMR по- прежнему совместим только с ES5 (не всем больше нужно переносить классы), я регулярно сталкивался с ошибками, связанными с HMR, которые возникают только в процессе разработки. Мне бы очень хотелось иметь способ отключить его.

Приветствуется даже хакерское решение. Это превращается в кошмар.

Я считаю, что столкнулся с похожей проблемой. В настоящее время пытаюсь использовать точку реакции на странице Next.js. При вызове this.setState из обработчика событий Waypoint я получаю ошибку Maximum call stack size exceeded . Это происходит только при запуске Next.js в режиме разработки. Если I npm run build и npm start проблема не возникает.

Может быть связано с этим вопросом ?

В любом случае мы могли бы снова открыть эту проблему. HMR может очень раздражать во многих ситуациях. Если это не является приоритетом, можете ли вы предоставить информацию о том, где найти этот код (чтобы вручную отключить его) и / или сделать PR @arunoda

Прямо сейчас мы испытываем огромные проблемы с Apollo GraphQL + Next JS (5.0.0). getDataFromTree просто не работает, и это ломает многие вещи в нашей настройке :(

@timneutkens , @arunoda , можешь снова открыть это?

И кстати https://github.com/zeit/next.js/issues/1938#issuecomment -358195616

похоже, проблема с shouldComponentUpdate . Важно знать, что в режиме разработки эти функции не вызываются из-за ограничений функции горячей перезагрузки .
Я бы сказал, запускать в производственном режиме локально и добавить журналы к вашим функциям.

Это кажется важным

Иногда я хотел бы отключить HMR в режиме разработки, чтобы не загромождать вкладку сети инструментов разработчика ненужным шумом сообщений.

"on-demand-entries-ping? page = / xxx" и т. д.

Нажатие CMD-R для перезагрузки страницы не представляет большой проблемы, перезапуск сервера для получения обновлений в режиме prod - это боль.

в качестве обходного пути вы можете предотвратить запросы hmr с помощью функции "Блокировка запросов" в инструментах разработчика Chrome.

@vanmik Отличный совет, спасибо! ✨

Чтобы найти блокировку запросов в Chrome (как минимум 66), вам может потребоваться:

откройте «Настройка и управление DevTools» (три вертикальные точки)> More tools > Request Blocking . Откроется консоль блокировки запросов, где вы можете проверить источники запросов для блокировки, как показано на снимке экрана

Хочу отметить, что этим вы не ограничены инструментами разработчика. Вы можете использовать плагин браузера для блокировки запросов. В этом случае вам не нужно каждый раз держать открытыми инструменты разработчика только для этого.

Но я надеюсь, что в будущем мы получим что-то простое, например:

// next.config.js
module.exports = {
  hmr: false
}

HRM - отстой. Это чаще приносит трудности, чем преимущества (например, когда некоторые части кода перезагружаются в горячем режиме, а некоторые - нет, что вызывает несогласованное состояние).

Хотя подсказка @vanmik останавливает фактическую операцию HMR, моя консоль разработчика по-прежнему загромождена записями http://localhost:3000/_next/on-demand-entries-ping?page=/xxx , только теперь они являются ошибками.

Неприемлемо для отладки: - /

Конечно, хотелось бы иметь

// next.config.js
module.exports = {
  hmr: false
}

Может кто нибудь мог написать для этого плагин ???

@gihrig, вы можете отфильтровать эти ошибки с помощью контекстного меню консоли (

@arunoda Есть ли в этом прогресс? У меня проблема с проптипами HMR и immutablejs - очень неприятно. См .: https://github.com/facebook/prop-types/issues/221

Мое обходное решение состояло в том, чтобы включить request blocking а затем добавить запрос on-demand-entries-ping в список заблокированных запросов. Надеюсь, это поможет другим, кто не любит HMR так же сильно, как и я.

Чтобы отключить горячую перезагрузку модуля (HMR) в Next.js v7 +, добавьте это в свой файл next.config.js :

module.exports = {
  webpackDevMiddleware: (config) => {
    config.watchOptions = config.watchOptions || {};
    config.watchOptions.ignored = [
      // Don't watch _any_ files for changes
      /.*/,
    ];
    return config;
  },
};

Это отключит перестроение при изменении, что, в свою очередь, приведет к тому, что браузер никогда не «увидит» никаких изменений и, следовательно, ничего не перезагрузит. Это означает, что Next.js не будет перекомпилироваться при изменениях . Вам придется перезапускать сервер next.js каждый раз, когда происходит изменение, а затем обновлять браузер.

Для решения, которое заставляет перезагружать всю страницу при каждом изменении, см. Этот комментарий ниже .

FWIW скоро объединит это: https://github.com/zeit/next.js/pull/4508

Для решения, которое всегда будет создать server.js :

const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {

  // ℹ️ Below is the magic which forces a page reload on every change
  // ℹ️ From https://github.com/zeit/next.js/issues/1109#issuecomment-446841487

  // The publish function tells the client when there's a change that should be hot reloaded
  const publish = app.hotReloader.webpackHotMiddleware.publish.bind(
    app.hotReloader.webpackHotMiddleware,
  );

  // Intercept publish events so we can send something custom
  app.hotReloader.webpackHotMiddleware.publish = (event, ...rest) => {
    let forwardedEvent = event;

    // upgrade from a "change" to a "reload" event to trick the browser into reloading
    if (event.action === 'change') {
      forwardedEvent = {
        action: 'reload',
        // Only `/_document` pages will trigger a full browser refresh, so we force it here.
        data: ['/_document'],
      };
    }

    // Forward the (original or upgraded) event on to the browser
    publish(forwardedEvent, ...rest);
  };
  // ℹ️ End force page reload on change

  // ... Whatever custom server setup you have. See: https://github.com/zeit/next.js/#custom-server-and-routing
});

Я примерно на 80% уверен, что это сломается в будущем.

Это ужасный взлом, но только так я смог обойти ошибку, из-за которой вкладка браузера потребляла> 100% ЦП, а затем вылетала в Chrome при каждой горячей перезагрузке.

Надеюсь, к моменту взлома хакера будет найдено официальное решение или ошибки, упомянутые в этой проблеме, будут исправлены 👍

Причина, по которой я хочу отключить HMR, заключается в том, что панель DevTools / Applications / Cookies (Chrome Windows) теряет фокус при вводе, потому что обновления HMR продолжают происходить в фоновом режиме. Я подозреваю, что это будет так, даже если я скажу webpackDevServer игнорировать все файлы. Соединение с веб-сокетом по-прежнему будет выполняться в фоновом режиме, и я считаю, что именно это соединение разбивает панель cookie.

Суть в том, что идеальное решение должно полностью отключать HMR. Спасибо!

К сожалению, вы не можете просто добавить это в свой next.config.js

module.exports = {
  webpackDevMiddleware: config => {
    config.lazy = true;
    return config;
  },
};

Эта опция указывает модулю работать в «ленивом» режиме, что означает, что он не будет перекомпилировать при изменении файлов, а скорее при каждом запросе. Похоже на то, на что многие из нас надеются, не доходя до решений

Источник : https://github.com/webpack/webpack-dev-middleware#lazy

Когда я пробую это на next 7.0.2 , я получаю следующую ошибку:

Сегодня была возможность поработать с проектом Create React App.

Я думаю, что корень этой проблемы HMR не столько в том, что HMR - зло, сколько в том, как он реализован.

Проще говоря, периодический опрос сервера клиентом - далеко не идеальный вариант.

Из беглого наблюдения кажется, что CRA использует соединение сокета, которое связывается с клиентом только тогда, когда файл был изменен, а затем клиент перезагружает страницу. Эта схема также приводит к более быстрому обновлению браузера, поскольку операция не зависит от следующего интервала опроса.

CRA имеет открытый исходный код . Было бы здорово, если бы кто-нибудь, у кого есть время и интерес, мог бы заняться обновлением HMR Next, чтобы следовать модели CRA (и, конечно же, легко отключить его :-)

@gihrig , вероятно, есть несколько разных причин, по которым люди хотят отключить HMR.

Я понимаю, что react-hot-loader требует определенных предположений о том, как написано ваше приложение, как моделируется состояние и об отсутствии значимой идентичности объекта. Эти предположения обычно верны для правильно написанного приложения на основе redux, но могут не выполняться для приложений, которые были разработаны с использованием других подходов. Я согласен с тем, что проблема не в том, что HMR - это зло, а в том, что это не универсальный инструмент. Это создает некоторый диссонанс в контексте структуры, которая в остальном не зависит от этих проектных решений.

Переход с опроса на веб-сокеты, вероятно, хорошая идея, но опрос - это не «корень проблемы», или, скорее, он не связан, по крайней мере, с некоторыми проблемами, с которыми здесь столкнулись люди.

Обратите внимание, что в обоих последних 2 комментариях сделаны неправильные предположения:

• Next.js не использует response-hot-loader, он повторно отображает дерево компонентов, когда происходит изменение
• Next.js не выполняет опрос для получения изменений, он выполняет опрос, чтобы отметить, какие страницы все еще просматриваются, на canary это было изменено на веб-сокет, чтобы пользователь не видел опроса в своих инструментах разработки. Для дальнейшего расширения этого HMR работает с использованием соединения с источником событий, что означает, что сервер отправляет события (при изменении файла) в браузер.

@timneutkens Приятно слышать, спасибо. Это не было ошибочным предположением, это была устаревшая информация. RHL использовался, когда мы начали использовать Next, и это была причина проблем, с которыми мы столкнулись, что побудило меня изначально прокомментировать эту ветку. Однако я давно не видел проблем, связанных с HMR при использовании Next.

Фактически, теперь мы можем запускать нашу сборку ES2017 в dev!

Спустя 2 года людей, жалующихся на HMR, до сих пор нет официального способа отключить его? !!

Почему этот логин GET / _next / on-demand-entries-ping? Page = / в моем приложении NON next.js?

- саморазрешенный: пришлось закомментировать регистратор app.use. (morgan (dev)) странно то, что Morgan установлен в другом приложении без next.js, поэтому что-то происходит с этим, регистрируется Морган, я хочу знать, почему это происходит. Этого не происходило до установки next.js в другом проекте.

Пожалуйста, откройте, проблема определенно не решена.

+1