在生产环境中使用Tailwind CDN有多糟糕？

Question

13

在生产环境中使用Tailwind CSS CDN会有性能影响，不建议这样做。具体原因是什么？

- csft306

3

CDN会加载整个Tailwind CSS，其中包括成千上万的类，导致浏览器加载大量不必要的信息。建议在生产环境中自动删除任何不必要的类。 - Jacob

谢谢并已经了解，@Jacob。Tailwind 的新功能“始终随时准备”的“即时”是什么？它如何提高性能？ - csft306

Tailwind的JIT功能在开发过程中自动从包中删除不必要的类，但由于我有一段时间没用过Tailwind，所以不确定。建议查看他们的网站https://tailwindcss.com。 - Jacob

@Jacob 这是真的吗？在我看来，它们似乎是在运行时构建 CSS。请参见 https://cdn.tailwindcss.com/3.2.4 我猜测这会消耗大量计算资源。 - Dutch77

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mbaytas · Accepted Answer

Tailwind CSS基本上会“扫描”您网站的代码，并创建一个内置CSS文件，其中仅包含您在网站上使用的类的样式。

相比之下，使用CDN，您将加载整个Tailwind类和样式库。当访问者访问您的网站时，他们的浏览器会下载整个库。

更大的文件大小意味着更长的加载时间，这可能会导致用户体验明显受损，特别是对于连接速度较慢的访问者。它还会对SEO产生负面影响，因为加载速度是搜索引擎排名的重要因素。

有多糟糕？

Tailwind文档中{{link1:优化生产}章节指出：

Tailwind CSS非常注重性能，并旨在通过仅生成您项目中实际使用的CSS来生成尽可能小的CSS文件。

结合缩小和网络压缩，这通常会导致CSS文件小于10kB，即使是对于大型项目。例如，Netflix在Netflix Top 10中使用Tailwind，整个网站仅通过网络传递6.5kB的CSS。

......Tailwind CSS的开发版本为3645.2kB，未压缩为294.2kB，并使用Gzip进行压缩......

所以我们看到大约300kB与不到10kB的差异-相差30倍。

最后，我还要补充的是，如果从CDN使用Tailwind，您可能无法在代码编辑器中获得有用的功能，例如语法完成等，这会对开发体验产生很大影响。