Nextjs 热重载每次顺风变化需要 8-10 秒 css
Nextjs hot reloading taking 8-10 secs on every change of tailwind css
我正在学习 Nextjs 并第一次尝试使用 tailwind css。
我注意到我使用 tailwind 的 @apply 指令对 class 选择器上的 index.css 文件所做的每一次更改都需要 8-10 秒才能编译并显示在浏览器上。
重现步骤：
- 运行命令
npx create-next-app --example with-tailwind-css test-app
在 pages/index.js 中创建一个按钮并将其命名为 classbtn-blue。
运行 服务器使用以下命令
npm run dev
- 为 btn-blue 选择器更改 styles/index.css 文件中的任何 属性（例如：将 bg-blue-400 更改为 bg-red-400 左右，任何触发重新编译）。并观察在浏览器的本地主机上反映更改所需的时间。
我在实验后的一些观察：
只有在对@apply 样式进行更改时才会变慢。如果我在 index.css 中注释所有顺风代码并编写我自己的纯 css 样式并更改它，热重载是瞬时的
即使 changing/adding 任何顺风 class 到 index.js 文件中元素的 class 名称，热重载也是即时的（内联样式).
所以问题似乎只出现在使用来自外部 css 文件的 tailwind css 时。
我希望你能检查并帮助我解决这个问题。谢谢！
有类似的问题。唯一为我修复它的是：
- 升级nextjs到最新
- 删除
package.lock 或 yarn.lock 文件，具体取决于您使用的包管理器
- 删除你的整个
node_modules/文件夹
- 再次重新安装整个项目（
npm install 或 yarn install）
- 现在重新运行这个项目。构建现在应该近乎即时。
更新： 随着 Tailwind v2.1 的最新更新，引入了一个新的 Just-in-Time 引擎，可以即时生成 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',
请查看下面博客 post 中的公告视频，其中展示了所有新功能和更新，这些都是真正 mind-blowing 不容错过的 -
https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css
我发现这是 NextJs Github 存储库中的未解决问题 (#13488)。
在问题讨论线程中获得了以下解决方法，它工作得很好（变化在不到一秒钟内反映出来）。
创建两个 css 文件：
- 顺风导入（@tailwind 基础、实用程序和组件）(E.x tailwind.css)
- 您的自定义 css 文件，包含 @apply 规则和其他所有内容。 (E.x index.css)
将 tailwind.css 和 index.css 导入您的 pages/_app.js 文件以全局应用样式。
现在，您在 index.css 中对 @apply 所做的任何更改都会立即反映在本地实时服务器中。
我了解到在 Gatsby 中使用 tailwind 也存在同样的问题，因此在这种情况下它也可能有所帮助。
希望您觉得这很有用。谢谢
我正在学习 Nextjs 并第一次尝试使用 tailwind css。 我注意到我使用 tailwind 的 @apply 指令对 class 选择器上的 index.css 文件所做的每一次更改都需要 8-10 秒才能编译并显示在浏览器上。
重现步骤：
- 运行命令
npx create-next-app --example with-tailwind-css test-app
在 pages/index.js 中创建一个按钮并将其命名为 classbtn-blue。
运行 服务器使用以下命令
npm run dev
- 为 btn-blue 选择器更改 styles/index.css 文件中的任何 属性（例如：将 bg-blue-400 更改为 bg-red-400 左右，任何触发重新编译）。并观察在浏览器的本地主机上反映更改所需的时间。
我在实验后的一些观察：
只有在对@apply 样式进行更改时才会变慢。如果我在 index.css 中注释所有顺风代码并编写我自己的纯 css 样式并更改它，热重载是瞬时的
即使 changing/adding 任何顺风 class 到 index.js 文件中元素的 class 名称，热重载也是即时的（内联样式).
所以问题似乎只出现在使用来自外部 css 文件的 tailwind css 时。
我希望你能检查并帮助我解决这个问题。谢谢！
有类似的问题。唯一为我修复它的是：
- 升级nextjs到最新
- 删除
package.lock或yarn.lock文件，具体取决于您使用的包管理器 - 删除你的整个
node_modules/文件夹 - 再次重新安装整个项目（
npm install或yarn install） - 现在重新运行这个项目。构建现在应该近乎即时。
更新： 随着 Tailwind v2.1 的最新更新，引入了一个新的 Just-in-Time 引擎，可以即时生成 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',
请查看下面博客 post 中的公告视频，其中展示了所有新功能和更新，这些都是真正 mind-blowing 不容错过的 -
https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css
我发现这是 NextJs Github 存储库中的未解决问题 (#13488)。 在问题讨论线程中获得了以下解决方法，它工作得很好（变化在不到一秒钟内反映出来）。
创建两个 css 文件：
- 顺风导入（@tailwind 基础、实用程序和组件）(E.x tailwind.css)
- 您的自定义 css 文件，包含 @apply 规则和其他所有内容。 (E.x index.css)
将 tailwind.css 和 index.css 导入您的 pages/_app.js 文件以全局应用样式。
现在，您在 index.css 中对 @apply 所做的任何更改都会立即反映在本地实时服务器中。
我了解到在 Gatsby 中使用 tailwind 也存在同样的问题，因此在这种情况下它也可能有所帮助。
希望您觉得这很有用。谢谢