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

Question

在生产中使用 Tailwind CSS CDN 对性能有何影响？

到底为什么不推荐这样做？

Answer 1

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

\n

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

\n

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

\n

有多糟糕？

\n

Tailwind 文档中有关生产优化的章节指出：

\n

\n

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

\n

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

\n

\n

将此与Tailwind v2 文档同一章节中的说明进行比较：

\n

\n

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

\n

\n

因此，我们看到大约 300kB 与不到 10kB \xe2\x80\x93 相比，相差 30 倍。

\n

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

\n