css - 推特 Bootstrap : less compilation taking a long time

标签 css twitter-bootstrap less

我正在使用 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 文件也是如此。有没有办法以某种方式减少对 css 的缓存? 或者也许还有其他替代解决方案来解决这个问题?

最佳答案

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

我还建议分析 JavaScript(Chrome 有一个很好的 JS 分析器),看看是否出现任何明显的东西,比如一个缓慢且重复调用的 LESS 相关函数。

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

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

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

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

  • 对于生产,我使用构建操作将我的 .less 文件编译成单个 CSS 文件,并直接在页面中引用该 CSS 文件。这消除了一切动态因素。

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

关于css - 推特 Bootstrap : less compilation taking a long time,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12228745/

相关文章:

javascript - Bootstrap 导航选项卡 - Fire Javascript

html - CSS:这个利润从哪里来?

javascript - 如何防止文本选择阻碍 onMouseMove 事件?

css - Chrome 中的 Rails 布局错误,但 Firefox 显示正常

javascript - 调整浏览器大小时 bootstrap scrollspy 错误

html - 为什么我的导航栏不显示内联

css - 如何在 LESS 1.4.0 中从 ~"迁移

css - 更少的递归自动网格

css - 在运行时更改 SASS 或 LESS 变量值

html - Bootstrap - 5 列布局