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 相关的严重错误。 我真的很想有办法禁用它。

即使是一个hacky的解决方案也将不胜感激。 它正在变成一场噩梦。

我相信我遇到了一个相关的问题。 目前正在尝试在 Next.js 页面中使用 react-waypoint。 在 Waypoint 事件处理程序中调用this.setState ，我收到Maximum call stack size exceeded错误。 这仅在开发模式下运行 Next.js 时发生。 如果我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 重新加载页面没有什么大问题，在生产模式下重新启动服务器以获取更新是一种痛苦。

作为一种解决方法，您可以使用 chrome 开发工具的“请求阻止”功能阻止 hmr 请求

@vanmik很棒的提示，谢谢！ ✨

要在 Chrome（至少 66）中找到请求阻止，您可能需要：

打开“自定义和控制 DevTools”（三个垂直点）> More tools > Request Blocking 。 这将打开请求阻止控制台，您可以在其中检查要阻止的请求源，如@vanmik的屏幕截图所示。

想提一下，您不仅限于具有此功能的开发工具。 您可以使用浏览器插件来阻止请求。 在这种情况下，您不需要每次都打开开发工具。

但我希望将来我们会得到一些简单的东西：

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

人力资源管理很烂。 它带来的困难多于好处（例如，当代码的某些部分被热重载而有些则不会导致不一致的状态时）。

虽然@vanmik的提示停止了实际的 HMR 操作，但我的开发控制台仍然充斥着http://localhost:3000/_next/on-demand-entries-ping?page=/xxx条目，只是现在它们是错误。

调试不可接受：-/

当然很想拥有

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

也许有人可以为此编写一个插件？？？

@gihrig您可以使用控制台上下文菜单过滤这些错误（右键单击错误）：

@arunoda这方面有什么进展吗？ 我遇到了 HMR 和 immutablejs proptypes 的问题 - 非常令人沮丧。 见： https :

我的解决方法是启用request blocking ，然后将on-demand-entries-ping请求添加到被阻止的请求列表中。 希望它可以帮助像我一样不喜欢 HMR 的其他人。

要在 Next.js v7+ 中禁用热模块重新加载 (HMR)，请将其添加到您的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 :

对于始终在更改时重新加载页面的解决方案，您可以创建一个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% CPU 然后在每次热重新加载时在 Chrome 中崩溃。

希望到黑客崩溃的时候，会有一个官方的解决方案或者这个问题中提到的错误会被修复👍

我想禁用 HMR 的原因是 DevTools/Applications/Cookies (Chrome Windows) 面板在您输入时失去焦点，因为 HMR 更新一直在后台发生。 我怀疑即使我告诉 webpackDevServer 忽略所有文件，情况也会如此。 websocket 连接仍然会在后台进行，我相信正是这个连接正在影响 cookie 面板。

要点是：理想的解决方案必须完全禁用 HMR。 谢谢！

不幸的是，您不能将它添加到您的next.config.js

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

此选项指示模块以“懒惰”模式运行，这意味着它不会在文件更改时重新编译，而是在每次请求时重新编译。 听起来像我们很多人都希望的东西，而不必像@jesstelford的解决方案那样

来源： https :

当我在next 7.0.2上尝试这个时，我收到以下错误：

今天有机会与 Create React App 项目合作。

我认为这个 HMR 问题的根源不是 HMR 是邪恶的，而是它的实施方式。

简而言之，让客户端定期轮询服务器并不理想。

从粗略的观察来看，CRA 似乎使用套接字连接，该连接仅在文件更改时与客户端通信，然后客户端重新加载页面。 此方案还导致浏览器刷新更快，因为该操作不依赖于下一个轮询间隔。

CRA 是开源的。 如果有时间和兴趣的人可以深入升级 Next 的 HMR 以遵循 CRA 模型（当然也可以轻松禁用它，那就太好了：-）

@gihrig人们希望禁用 HMR 可能有几个不同的原因。

我的理解是，react-hot-loader 需要对应用程序的编写方式、状态的建模方式以及缺少重要的对象标识进行某些假设。 这些假设通常适用于正确编写的基于 redux 的应用程序，但可能不适用于使用其他方法设计的应用程序。 我同意问题不在于 HMR 是邪恶的——只是它不是一个通用工具。 这在与这些设计决策无关的框架上下文中产生了一些不协调。

从轮询切换到 websockets 可能是一个好主意，但轮询不是“问题的根源”，或者说它至少与这里人们遇到的一些问题无关。

请注意，最后 2 条评论都做出了错误的假设：

• Next.js 不使用 react-hot-loader，它在发出更改时重新渲染组件树
• Next.js 不进行轮询以接收更改，它进行轮询以标记哪些页面仍在查看中，在 Canary 上，这已更改为 websocket，以便用户不会在他们的开发工具中看到轮询。 使用事件源连接进一步扩展此 HMR 工作，这意味着服务器将事件（文件更改时）发送到浏览器

@timneutkens很

事实上，我们现在可以在 dev 中运行我们的 ES2017 构建！

在人们抱怨 HMR 2 年后，仍然没有官方的方法来禁用它？！！

为什么这个登录 GET /_next/on-demand-entries-ping?page=/ 在我的非 next.js 应用程序上？

-- 自行解决：不得不注释掉记录器 app.use.(morgan(dev)) 奇怪的是，Morgan 安装在另一个没有 next.js 的应用程序上，因此正在记录此日志摩根，我想知道为什么会这样。 在另一个项目上安装 next.js 之前不会发生这种情况。

请重新打开问题肯定没有解决。

+1