Twitter Bootstrap：花费很长时间编译

我正在使用Twitter Bootstrap编写一个简单的应用程序。在我的主要HTML文件中，我有以下几行：Twitter Bootstrap：花费很长时间编译

<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不知何故？或者还有其他解决方案可以解决这个问题吗？

来源

2012-09-01 machinery

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

我也建议分析JavaScript（Chrome有一个很好的JS分析器），看是否有任何明显的问题出现，比如LESS相关的函数很慢并且需要重复调用。

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

最重要的是，没有适用于LESS的JavaScript。一切都在服务器端完成。
在开发过程中，我通过dotLess HTTP处理程序请求我的.less文件，它处理它们并处理缓存。时不时地，缓存故障，我不得不重新启动我的本地Web服务器，但这不是什么大不了的事情。这使我可以通过刷新页面来减少实时更改并查看它们。它也很快。

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

对于生产，我使用一个构建行动编译我.LESS文件合并为一个CSS文件，并在页面直接引用CSS文件。这将一切动态都排除在等式之外。

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

来源

2012-09-01 15:02:52

谢谢，这是很好的建议。我正在使用django ...我想你的方法相当于让SimpLESS工作，这将使我拥有服务器上的所有代。 – machinery

服务器代是最好的，但我很想知道为什么JS版本太慢了。 –

嗯..我也很惊讶。我只是下载了一个intializr生成的Bootstrap版本，并没有真正改变更少的文件...所以这是一个干净的开箱即用版本。 – machinery

你需要每一个部分从引导？因为那很多臃肿的代码。

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

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

你需要'代码'&'表'吗？

在“响应式实用程序”中，如果您不需要它，您可以评论很多。

让我告诉你我的设置，它在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";

来源

2013-11-19 23:49:53 Mark

Twitter Bootstrap：花费很长时间编译

回答

相关问题