Twitter Bootstrap: 编译 less 需要很长时间

Question

我正在使用 Twitter Bootstrap 编写一个简单的应用程序。在我的主 HTML 文件中，我有以下几行代码：

<link rel="stylesheet/less" href="/static/less/style.less">
<script src="/static/js/libs/less-1.3.0.min.js"></script>

每次刷新页面，整个CSS都会被生成。这需要大约15秒的时间，等待页面加载很麻烦。我尝试使用SimpLESS从less文件中生成CSS，但是生成失败了。我会尝试让它工作，但我也在想是否有哪些地方做错了... 我不喜欢每次生成CSS，即使我没有更改less文件。有没有办法让less缓存CSS呢？或者这个问题还有其他解决方案吗？

- machinery

Answer 1

我建议你删除部分.less文件以查看是否有具体的原因导致性能不佳。它不应该如此缓慢。我的猜测是特定的 mixin 或 function 导致了问题。

我还建议使用 JavaScript 进行性能分析（Chrome 有一个不错的 JS 分析器），以查看是否有明显的问题，比如一个与 LESS 相关的 function 反复调用而变得缓慢。

以下是我整体的 LESS 策略，这对你将来可能会有所帮助。我正在使用 Visual Studio 和 ASP.Net，但你可以在各种环境中进行设置。

• 最重要的是，不要在 LESS 中使用 JavaScript，一切都在服务器端完成。

• 在开发中，我通过 dotLess HTTP 处理程序请求我的 .less 文件，它会处理这些文件并进行缓存处理。偶尔会出现缓存故障，需要重新启动本地 Web 服务器，但这并不是什么大问题。这使我能够实时更改我的 less，并通过刷新页面即可查看更改。它也很快。

示例：<link rel="stylesheet" href="foo.less" />

• 对于生产环境，我使用构建操作将我的 .less 文件编译成一个单独的 CSS 文件，并直接在页面中引用 CSS 文件。这样可以消除所有动态因素。

例如：<link rel="stylesheet" href="final.css" />

- Tim M.

---

谢谢，这是一个好建议。我正在使用Django... 我想我的方法等同于您的方法将是让 SimpLESS 正常工作，这样我就可以在服务器上进行所有的生成了。 - machinery

服务器版本最好，不过我很想知道为什么JS版本这么慢。 - Tim M.

嗯...对我来说也很惊讶。我刚刚下载了一个 intializr 生成的 Bootstrap 版本，还没有真正改变任何 less 文件...所以这是一个干净的开箱即用版本。 - machinery

你在不同的浏览器中是否得到相同的行为？ - Tim M.

嗯...刚刚检查了一下，结果对我来说相当惊人。Chrome、FF和Opera通常需要约10秒钟。IE只需要1-2秒钟。然而，我成功地通过这个链接https://dev59.com/tWbWa4cB1Zd3GeqPYZlM使SimpLESS生成工作起来。现在我只需链接到css文件，它应该在所有浏览器上都能快速运行 :) - machinery

Answer 2

你是否需要Bootstrap的每个部分？因为那会有很多冗余代码。

尝试禁用主Bootstrap文件中的一些部分：

你是否需要所有CSS和JavaScript部分？

你是否需要 'code' 和 'tables'？

在 "responsive-utilities" 中，如果不需要，可以将很多内容注释掉。

让我展示给你我的设置，它是使用SASS编写的，但原则保持不变：

// Compass utilities
@import "compass";

// Core variables and mixins
@import "includes/variables";
@import "includes/mixins";

// Reset
@import "includes/normalize";
@import "bootstrap/print";

// Core CSS
@import "includes/scaffolding";
@import "includes/type";
//@import "bootstrap/code";
@import "includes/grid";
//@import "bootstrap/tables";
@import "includes/forms";
@import "includes/buttons";

// Components: common
@import "includes/component-animations";
@import "bootstrap/glyphicons";
//@import "includes/dropdowns";
@import "includes/button-groups";
//@import "bootstrap/input-groups";
//@import "bootstrap/navs";
//@import "includes/navbar";
//@import "bootstrap/breadcrumbs";
//@import "bootstrap/pagination";
//@import "bootstrap/pager";
//@import "bootstrap/labels";
//@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
//@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "includes/close";

// Components w/ javascript
@import "includes/alerts";
@import "bootstrap/modals";
//@import "bootstrap/tooltip";
@import "includes/popovers";
//@import "includes/carousel";

// Utility classes
@import "bootstrap/utilities"; // Has to be last to override when necessary
@import "bootstrap/responsive-utilities";

//custom styling
@import "includes/customstyles";

- Mark