在下一个 js 中使用 webpack5 刷新不需要的页面

Posted 2023-02-22

【中文标题】在下一个 js 中使用 webpack5 刷新不需要的页面

【英文标题】：Unwanted page refresh with webpack5 in next js

【发布时间】：2021-08-13 22:04:52

【问题描述】：

当我打开 webpack5 并在第一次渲染后从页面调用内部 api(/api/*) 时，页面刷新并记录由于服务器端更改而刷新页面数据。刷新一次后就可以正常使用webpack4了。

预期行为 首次渲染后，页面不应在 api 调用上刷新。

【参考方案1】：

我最近更新到 Next JS 12，突然也开始遇到这个问题。我不确定这是否与此相关，因为我相信 Next JS 11 也将​​ Webpack 5 用于 HMR，但他们肯定会切换到套接字通信以进行热重载，而不是像以前的版本那样使用服务器发送的事件。 [https://nextjs.org/docs/upgrading#nextjs-hmr-connection-now-uses-a-websocket]

我有一个文件 /inc/paths.js，我在其中为我的应用程序中的不同资源组织和导出 URI 路径字符串变量。该模块中有许多路径也被我的 /api 脚本的一部分使用，即 AWS S3 存储桶路径的对象键。因此，这个模块不仅被 /pages 目录和其他地方的 React 组件导入，还被 /api 目录中的模块导入。 通过将 /api 模块使用的所有变量移动到它们自己的文件中，并确保 React 组件或页面都没有导入这些变量，错误对我来说似乎已经消失了。

这可能与 Vercel 的这句话有关：

最后，如果您编辑的文件是由外部文件导入的 反应树，快速刷新将回退到完全重新加载。你 可能有一个文件，它呈现一个 React 组件，但也导出一个 由非 React 组件导入的值。例如，也许 您的组件还导出一个常量和一个非 React 实用程序文件 进口它。在这种情况下，考虑将常量迁移到 单独的文件并将其导入到两个文件中。这将重新启用 快速刷新工作。其他情况通常可以类似的方式解决 大大地。 https://nextjs.org/docs/basic-features/fast-refresh

虽然逻辑不完全一致，但它让我相信沿着这些思路发生了一些事情。

【参考方案2】：

我更新了 next.js，因为每当 next.js 运行时我都会收到控制台警告，告诉我它使用的是 weppack 4 而不是 5

您仍然可以通过在下一个配置中更改它来使用 webpack 4，因为这是一个更新问题