带有 Next.js 10.0.3 的 Tailwind CSS（PostCSS 插件）在开发环境中导致 Javascript 堆内存不足错误

Posted 2023-03-06

【中文标题】带有 Next.js 10.0.3 的 Tailwind CSS（PostCSS 插件）在开发环境中导致 Javascript 堆内存不足错误

【英文标题】：Tailwind CSS (PostCSS Plugin) with Next.js 10.0.3 gives Javascript heap out of memory error in dev environment

【发布时间】：2021-03-30 10:01:31

【问题描述】：

要复制问题，您可以使用此示例并在开发环境中运行。

https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

上面的例子在开发环境中也有非常高的内存使用，这在下一个 js 应用程序中并不常见。

我尝试过组合使用不同版本的 tailwindcss 和 Next.js，但问题仍然存在。 PS：我使用的是 Ubuntu 20.04（如果这有任何帮助的话）。

【问题讨论】：

你有没有为此罚款解决方案，我也在 Ubuntu 20.04

我已经为 Tailwindcss 和 pm2 设置了 Gulp，以便在内存超过 1024 MB 时重新启动。我知道这个设置很烦人，但我没有找到任何其他解决方案。

【参考方案1】：

当我在 NextJS (10.2) 项目中集成 Tailwind(2.2.2) 时，我也遇到了这个错误 FATAL ERROR: Reached heap limit Allocation failed - javascript heap out of memory。

一些关于内存泄漏的 github-issue 讨论指向 NextJs 的优化 <Image/> 组件的使用。 所以我暂时恢复到img标签，到目前为止它很稳定。

没有理想的解决方案，但请尝试一下。

我还在开发中禁用了 Tailwind 的 JIT 模式。

Github 讨论 #1 #2