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相关的函数很慢并且反复调用。

这是我的整体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" />

Answer 2

你需要Bootstrap的每一部分吗？因为那很多膨胀的代码。

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

您是否需要JavaScript部件的所有CSS？

你需要＆＃39;代码＆＃39; ＆安培; ＆＃39;表＆＃39;？

在＆＃34;响应实用程序＆＃34;中，如果您不需要，可以批评出很多。

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

Twitter Bootstrap：花费很长时间的编译

2 个答案: