Twitter Bootstrap:编译时间短，耗时长

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从较少的文件中生成css，但生成失败了。我会努力让它发挥作用，但我也在想我是否没有做错什么。。。

我不喜欢每次都生成css的事实，即使我没有更改更少的文件。有没有办法以某种方式减少css的缓存？或者这个问题可能还有其他的解决方案？

Answer 1

我建议删除.less文件的一部分，看看是否有任何特定的东西导致性能不佳。它不应该那么慢。我的猜测是某个特定的mixin或函数导致了这个问题。

我还建议对JavaScript进行评测（Chrome有一个很好的JS评测器），看看是否出现了任何明显的东西，比如一个速度较慢且重复调用的不太相关的函数。

以下是我的整体LESS策略，这可能对您将来有所帮助。我使用的是Visual Studio和ASP.Net，但您可以在各种环境中执行此操作。

• 最重要的是，LESS没有JavaScript。一切都是在服务器端完成的。

• 在开发过程中，我通过dotLess HTTP处理程序请求.less文件，该处理程序处理这些文件并处理缓存。缓存不时出现故障，我不得不重新启动本地网络服务器，但这没什么大不了的。这使我能够实时更改我的less，只需刷新页面即可查看它们。它也很快。

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

• 对于生产，我使用构建操作将.less文件编译为一个CSS文件，并直接在页面中引用该CSS文件。这就排除了所有的动态因素

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

Answer 2

您需要Bootstrap中的每个部件吗？因为那有很多膨胀的代码。

尝试从主引导文件中禁用某些部分：

你需要所有JavaScript部分的CSS吗？

你需要"代码"&amp桌子？

在"响应型实用程序"中，如果你不需要，你可以评论很多

让我向你展示我的设置，它在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";