3

我正在使用 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 的缓存？或者也许有其他替代解决方案来解决这个问题？

4

2 回答 2

3

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

我还建议对 JavaScript 进行分析（Chrome 有一个不错的 JS 分析器）以查看是否出现任何明显的情况，例如缓慢且重复调用的 LESS 相关函数。

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

于 2012-09-01T15:02:52.357 回答
2

你需要 Bootstrap 的每个部分吗？因为有很多臃肿的代码。

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

您需要 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-19T23:49:53.237 回答