Nextjs 热重新加载每次更改顺风 css 需要 8-10 秒答案

【问题标题】：Nextjs hot reloading taking 8-10 secs on every change of tailwind cssNextjs 热重新加载每次更改顺风 css 需要 8-10 秒
【发布时间】：2020-11-21 16:36:04
【问题描述】：

我正在学习 Nextjs，并第一次尝试使用 tailwind css。我注意到，我使用 tailwind 的 @apply 指令对类选择器上的 index.css 文件所做的每一次更改都需要 8-10 秒才能编译并显示在浏览器上。

重现步骤：

运行命令

npx create-next-app --example with-tailwind-css test-app

在 pages/index.js 中创建一个按钮并将其命名为 btn-blue。
使用以下命令运行服务器

npm 运行开发

为 btn-blue 选择器更改 styles/index.css 文件中的任何属性（例如：将 bg-blue-400 更改为 bg-red-400 左右，任何触发重新编译的东西）。并观察在浏览器上反映本地主机上的更改所需的时间。

我在实验后的一些观察：

只有在更改 @apply 样式时才会出现这种缓慢。如果我将 index.css 中的所有顺风代码都注释掉，并编写自己的纯 css 样式并更改它，热重载是瞬间完成的
即使将任何顺风类更改/添加到 index.js 文件中元素的类名（内联样式），热重载也是即时的。

所以问题似乎只是在使用来自外部 css 文件的 tailwind css 时。

我希望你能检查并帮助我。谢谢！

【问题讨论】：

这里有同样的问题，但即使我注释掉所有 Tailwind CSS 样式，开发时间也要 20 多秒
@georgekrax 这已通过最新的顺风更新修复。您可以在下面查看我的编辑，了解有关如何解决此问题的更多详细信息。
顺便说一句，您可以查看我在 next.js 的存储库上创建的关于缓慢开发的新 issue

标签： reactjs next.js tailwind-css

【解决方案1】：

有类似的问题。唯一为我解决的问题是：

升级 nextjs 到最新的
删除 package.lock 或 yarn.lock 文件，具体取决于您使用的包管理器
删除您的整个node_modules/ 文件夹
重新安装整个项目（npm install 或yarn install）
现在重新运行该项目。现在构建应该几乎是即时的。

【讨论】：

【解决方案2】：

更新：随着 Tailwind v2.1 的最新更新，引入了一个新的即时引擎，它可以动态生成 css，从而使您的最终 css 包大小非常小且高效。

这解决了 NextJS 渲染缓慢的问题，并且渲染是即时的。

运行以下命令以尝试使用启用了 JIT 的最新 Tailwindcss 设置 NextJS 样板项目。

npx create-next-app --example with-tailwindcss with-tailwindcss-app

要自己启用 JIT，请将 tailwindcss 库更新到最新版本，然后在您的 tailwind.config.js 文件中 module.exports = { 代码行之后添加以下属性 -

 mode: 'jit',

请查看以下博客文章中的公告视频，该视频显示了所有新功能和更新，这真的令人兴奋，不容错过 -

https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css

我发现这是 NextJs Github 存储库中的一个未解决问题 (#13488)。在问题讨论线程中得到了以下解决方法，它的工作原理很吸引人（变化会在不到一秒的时间内反映出来）。

创建两个css文件：

顺风导入（@tailwind base、utilities 和 components）（E.x tailwind.css）
带有@apply 规则和其他所有内容的自定义css 文件。（例如 index.css）

将 tailwind.css 和 index.css 导入您的 pages/_app.js 文件以全局应用样式。

现在，您在 index.css 中对 @apply 所做的任何更改都会立即反映在 localhost 实时服务器中。

我知道在 Gatsby 中使用 tailwind 的问题也存在，所以它在这种情况下也可能会有所帮助。

希望你觉得这很有用。谢谢

【讨论】：