前端编译less

Question

我该如何在浏览器上高效地编译less代码？我使用这段代码来在浏览器上编译less代码，但是这个过程花费的时间很长。我需要在浏览器上编译而不是在后端。

<script>
    less = {
        env: "development",
        logLevel: 2,
        async: false,
        fileAsync: false,
        poll: 1000,
        functions: {},
        dumpLineNumbers: "comments",
        relativeUrls: false
    };
</script>
<script src="http://cdn.storehippo.com/assets/less-1.5.0.js"></script>
<script src="lessfile.less"></script>

- Rohit

---

less.js编译器只适用于开发阶段，在生产环境中应提供压缩后的CSS文件。 - atmd

Answer 1

事实上，您的问题非常广泛。为什么必须在客户端编译代码？你的代码是什么样子的？当您再次编译代码时，是否有任何更改？

另请参见：

1. 如何优化Less CSS？如何生成所有Less文件的1个压缩版本？我还使用modifyVars。 2. 预编译less更快吗？

在大多数情况下，不应在产品环境中使用Less。如果由于某种原因而使用，则可以尝试优化编译时间。

您正在使用`env：“development”`选项，该选项会防止Less缓存已编译的代码。代码中的每个@import指令都需要打开并通过http读取文件。考虑将代码分成静态部分（编译CSS）和动态部分，这些部分必须针对每个请求进行编译。

更新：

如果您正在使用Safari，请还要参见：https://github.com/less/less.js/issues/2339

您可以在less选项中使用{chunkInput: true}重新启用分块（或在less链接上使用data-chunk-input =“true”属性）。

- Bass Jobsen