在服务器端或客户端中使用较少的CSS预处理器（Use less）

Question

在生产环境中，使用客户端和服务器端的优缺点是什么？为什么要将less转换为静态CSS并在上线时使用它呢？据我了解，CSS会被服务器端和客户端缓存，因此速度不应该是一个问题，如果JS不可用，那也不是个问题，因为我的应用程序非常依赖于JavaScript，所以如果JavaScript不可用，我会有更大的问题。我不完全理解服务器端编译是如何工作的......谢谢

- newbie_86

Answer 1

我曾参与一项使用 LESS 的大型项目。我们在客户端编译时遇到了主要问题：因为客户端编译需要 JavaScript，而打印操作则需要关闭 JavaScript 才能将页面渲染出来，所以无论谁打印页面，都会呈现出完全未经过样式处理的页面。即使你的应用程序像我们一样大量使用 JavaScript，如果想支持打印功能，就需要在服务器端进行编译或提供静态 CSS。

对我们最好的解决方案是，在开发环境中运行 node.js 即时编译 LESS 代码，然后在部署网站到生产环境时，预编译成一个单独的压缩 CSS 文件。

预编译还可以将客户端每个页面访问时必须加载的文件请求数量从我们的情况下（每个 LESS 文件一个请求）减少到只需一个单独的 CSS 文件，并通过避免编译步骤（客户端 less.js 必须在每次导航到新页面之前运行）来加快加载速度。

我不建议在实时生产环境中即时编译它，因为那会增加很多不必要的处理器负载。如果您预先编译它，它将不会消耗更多的服务器资源，可以视为普通的一个 CSS 文件。

- Richard Connamacher

---

谢谢，只是确认我是否理解...这是否意味着在客户端，每次加载页面时都会处理较少的内容。在服务器端，仅为第一个加载的页面处理较少的内容，然后缓存并不再处理？ - newbie_86

是的，在客户端上，每次查看页面时都必须编译它。如果你有一个良好的服务器端实现，它将缓存已编译的CSS并在LESS源文件更改之前提供服务。但是，除非你计划动态更改样式表，否则你可以在首次部署到生产环境时提前编译LESS，并将其保存为直接从HTML引用的平面CSS文件。这将防止node.js甚至不需要运行，也是提供LESS的最高效方式。 - Richard Connamacher

另外，最好将CSS编译作为部署脚本的一部分进行编译，而不是依赖服务器自动编译。 - mlissner

我开发了一个解决方案，它使用客户端的Javascript编译，并允许您自定义less变量并立即查看结果，如果需要，可以保存已编译的CSS。它是在Grails中开发的。如果您愿意，我可以将其放在Github存储库中。缺点是，如果允许客户端更改编译后的CSS，则可能会遇到XSS问题，但我不确定。作为解决方法，您可以安装node.js在服务器上编译CSS。 - mpccolorado

如果你正在使用 Grails，你应该查看 http://www.asual.com/lesscss/ 上的 Java LESS Servlet 和编译器。 - Richard Connamacher

Answer 2

浏览器只能缓存从服务器接收到的数据。这 不包括 浏览器从 less 编译的 CSS（HTML5 本地存储机制除外）。这意味着浏览器每次加载 less 文件时都必须将其编译为 CSS--即使从浏览器缓存中加载 less 文件，而不是从服务器加载。

- abesto